Tutorial

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

Published on February 20, 2021
authorauthorauthor

Nicholas Cerminara, Andy Hattemer, and Andy Hattemer

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!

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Nicholas Cerminara

author


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?

Ask a questionSearch for more help

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

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more