// Tutorial //

Cómo cambiar la opacidad de una imagen de fondo en CSS

Published on February 19, 2021
Default avatar
Español
Cómo cambiar la opacidad de una imagen de fondo en CSS

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.

Método 1: Utilizar el posicionamiento absoluto y una imagen

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:

Hello World!

Método 2: Usar los seudoelementos de CSS

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:

Hello World!

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Learn more here


About the authors
Default avatar
Developer and author at DigitalOcean.

Default avatar
Community Builder

Then: Learned to build the internet on DigitalOcean Community. Now: Building DigitalOcean Community on the internet.


Default avatar
Community Builder

Then: Learned to build the internet on DigitalOcean Community. Now: Building DigitalOcean Community on the internet.


Still looking for an answer?

Was this helpful?
2 Comments

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”);