Con CSS y CSS3 puede hacer muchas cosas, pero establecer una opacidad en un fondo de CSS no es una de ellas. Sin embargo, si usa la creatividad, hay muchas soluciones creativas para hacer que parezca que está cambiando la opacidad de la imagen de fondo de CSS. Ambos métodos tienen una excelente compatibilidad con navegadores, que llega hasta Internet Explorer 8.
Este método significa exactamente lo que dice. Simplemente se utiliza el posicionamiento absoluto en una etiqueta img
normal y se hace que parezca que se usó la propiedad de background-image
de CSS. Lo único que debe hacer es poner la imagen dentro de un contenedor position: relative;
. Generalmente, así es como se ve el formato HTML:
<div class="demo_wrap">
<h1>Hello World!</h1>
<img src="https://assets.digitalocean.com/labs/images/community_bg.png">
</div>
Y así es como se verá su CSS:
.demo_wrap {
position: relative;
overflow: hidden;
padding: 16px;
border: 1px dashed green;
}
.demo_wrap h1 {
padding: 100px;
position: relative;
z-index: 2;
}
.demo_wrap img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0.6;
}
El truco aquí es realizar un posicionamiento absoluto de la etiqueta img y estirarla para que llene el contenedor principal por completo. Y posicionar relativamente todo lo demás para poder establecer un z-index
que lo arrastre por encima de img.
A continuación, se muestra una demostración en tiempo real:
Este método luce sencillo a primera vista y definitivamente es el método preferido para hacerlo. Al usar los seudoelementos de CSS de :before
o :after
, puede crear un div con una imagen de fondo y establece una opacidad en ella. A continuación, se muestra el aspecto que tendría su formato HTML de forma aproximada:
<div class="demo_wrap">
<h1>Hello World!</h1>
</div>
Y así es como se vería el CSS:
.demo_wrap {
position: relative;
background: #5C97FF;
overflow: hidden;
}
.demo_wrap h1 {
padding: 50px;
position: relative;
z-index: 2;
}
/* You could use :after - it doesn't really matter */
.demo_wrap:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png');
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}
Aquí también debemos mover el índice z del contenido (en este caso el <h1>
) por encima del seudoelemento de fondo y debemos definir explícitamente position: absolute;
y z-index: 1
en el seudoelemento :before
.
El resto de los atributos del seudoelemento existe para posicionarlo de manera que se superponga al 100% del elemento principal y también hacen uso de una nueva e inteligente propiedad de CSS: background-size: cover
que dimensiona el fondo para cubrir el elemento sin cambiar las proporciones. A continuación, se muestra una pequeña demostración de este método:
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Está muy bien!, solo a modo de comentario, los pseudo elementos deberían declararse con
::
en lugar de solamente:
en base a que el uso de un solo : apunta a pseudo clases y :: a pseudo elementos, antes no solía ser así pero actualmente es la práctica sugerida.MDN Pseudo-elements
Gracias por el tuto. Yo lo solucioné así:
background-image: linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)), url(“…/img/texturafondo-index.png”);