Estoy tratando de poner en cada div
una imagen diferente de fondo como con un tono casi transparente y encima otra imagen mas nítida.
-
2Hola nuevo usuario, porfavor te invito a que edites tu pregunta y coloques aquello que haz intentado y de una vez el codigo, el sitio no funciona de esta manera, ademas es dificil adviniar lo que estas haciendo sin ver como lo tienes, se requiere el codigo, de una vez te doy la bienvenida al sitio y te invito a pasar por el recorrido recorrido de bienvenida y a leer Cómo preguntar.– LayerCommented el 4 mar. 2022 a las 3:36
Añade un comentario
|
1 respuesta
Muy buenas Cristina, lo que debés de hacer es definir primero ambos div, luego seleccionarlos
<div class="div-1"><div class="div-2"></div></div>
html,
body {
/* Consultá si no sabés que es lo que se hace acá debajo */
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100%;
width: 100%;
}
.div-1 { /*Soy un contenedor padre*/
height: 100px;
width: 100%;
position: absolute; /*Declaro su posición absoluta*/
background-image: url("Aqui/va/la/dirección/web/o/ruta/local");
background-color: aqua; /*Simulo tener una imagen*/
}
.div-2 {
height: 100px;
width: 100%;
position: relative; /*Delcaro su posición relativa con respecto a su contenedor padre*/
inset: 50px 0; /*Muevo el elmento, "equivalente" a usar top, bottom, left y rigth por separado*/
opacity: 50%; /*Disminuyo su opacidad*/
background-image: url("Aqui/va/la/dirección/web/o/ruta/local");
background-color: blueviolet; /*Simulo tener una imagen*/
}