Configura Tu Propio Pulsador

Ejemplo de colocar elementos sobre una imagen en HTML /* Estilos para posicionar elementos sobre la imagen */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-image: url(‘images/FONDO-NUEVO.jpg’); /* Ruta de la imagen de fondo */ background-size: cover; background-position: center; } .container { position: relative; width: 800px; /* Ancho del contenedor */ display: flex; justify-content: center; /* Centra horizontalmente */ align-items: center; /* Centra verticalmente */ margin: 0 auto; /* Centra el contenedor horizontalmente */ background-size: cover; /* Ajusta el tamaño para cubrir el contenedor */ background-position: center; /* Centra la imagen de fondo */ } .overlay { position: absolute; } /* Estilos para los botones generales */ .button { border: none; padding: 0; width: 20px; /* Ancho del botón */ height: 80px; /* Alto del botón */ margin: -8px 0; /* Espaciado reducido entre botones */ cursor: pointer; background-color: transparent; /* Color de fondo transparente */ background-size: cover; /* Ajusta el tamaño de la imagen */ } .left-buttons { top: 155px; /* Ajusta la posición vertical del grupo de botones */ left: 185px; /* Ajusta la posición horizontal del grupo de botones */ display: flex; flex-direction: column; } .center-buttons { top: 50%; /* Centra verticalmente el grupo de botones */ left: 50%; /* Centra horizontalmente el grupo de botones */ transform: translate(-45%, -80%); /* Ajusta para centrar exactamente */ display: flex; flex-direction: column; } /* Estilos específicos para los botones centrales */ .center-button { width: 210px; /* Ancho del botón central */ height: 45px; /* Alto del botón central */ margin: 10px 0; /* Espaciado reducido entre botones centrales */ border-radius: 18px; /* Bordes redondeados */ } /* Estilos específicos para los botones más altos */ .taller-button { width: 20px; /* Ancho ajustado del botón */ height: 150px; /* Alto ajustado del botón */ margin: -8px 0; /* Espaciado reducido entre botones */ } .input-container { position: absolute; bottom: 10px; left: 10px; } .input-container input { padding-left: 60px; /* Espacio para la imagen */ height: 30px; font-size: 16px; background-image: url(‘images/serie.png’); /* Ruta de la imagen del fondo del input */ background-size: 30px 100px; /* Tamaño de la imagen de fondo */ background-position: 40px center; /* Posición de la imagen de fondo */ background-repeat: no-repeat; /* No repetir la imagen de fondo */ }
Imagen Principal
Imagen 1
Imagen 2
Imagen 3
Imagen 4
Imagen 5
Imagen 6

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

es_MXES
×

Hello!

Click one of our contacts below to chat on WhatsApp

× WhatsApp - Asesor técnico