Cómo insertar un botón en una imagen en HTML-5

Montaña espectacular

SINTAXIS:

[correo electrónico protegido]

Hay 2 formas de investigar su problema:

• Un botón en la parte superior de una imagen (El enfoque del índice z )
• Un botón de imagen (propiedad de imagen de fondo )

El siguiente fragmento de código muestra ambos escenarios: –

}
#container img / * Para la imagen detrás del botón * /
{
posición: absoluta;
índice z: -50;
ancho: 400 px;
}

https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQAGn2qS3TspDtu93D2iKv3QoynSaG_4SlEgchAtzW11rDWlx02i2HDVw“/&gt ;
¡Haz clic en mí!

Salida:

¡Espero que esto ayude!

¡Hazme un ping si tienes más dudas! 🙂

EDITAR 1

Otra forma más fácil de lograr ‘Un botón en la parte superior de la imagen’: –

Establecer la propiedad CSS de imagen de fondo del contenedor div

Ahora, uno puede ajustar la imagen de fondo para que no se repita según sus requisitos.

Dar hipervínculo a las imágenes y luego actuará como botón

Por ejemplo,

O si desea hacer que la imagen del botón dé el fondo del botón como imagen.

Por ejemplo: botón {

background-image: url (ruta que contiene la imagen);

}

Gracias

¿Desea un botón que se colocará en una imagen …?

Hay dos formas de crear un botón:

2. // también puedes dar una clase al botón como
3. Use espacios como & nbsp; y
   y márgenes para configurar su botón en la imagen ……… Codificación feliz …

Debe dar un posicionamiento relativo, absoluto o fijo a su contenedor y establecer su zIndex para decir 100.

También debe dar un posicionamiento relativo a sus elementos con el contenido de la clase y zIndex más bajo, digamos 97.

Y luego coloque su botón más alto estableciendo su posición en absoluto y zIndex en 95.

Espero eso ayude…

1. escribe esto en la etiqueta de estilo
2. img
3. {
4. índice z: -1;
5. }
6. y escribe esto en la etiqueta del cuerpo
7. 
8. myButton