Tutorial

Como alterar a opacidade de uma imagem de fundo do CSS

Published on February 19, 2021
authorauthorauthor

Nicholas Cerminara, Andy Hattemer, and Andy Hattemer

Português
Como alterar a opacidade de uma imagem de fundo do CSS

Com o CSS e o CSS3, é possível fazer muitas coisas, mas definir a opacidade em uma tela de fundo do CSS não é uma delas. No entanto, se você for criativo, existem várias alternativas criativas que darão a impressão de que a opacidade da imagem de fundo do CSS está sendo alterada. Ambos os métodos a seguir têm um excelente suporte de navegadores, indo até o Internet Explorer 8.

Método 1: use o posicionamento absoluto e uma imagem

Este método é exatamente o que parece. Você simplesmente usa o posicionamento absoluto em uma etiqueta img normal e faz com que a propriedade background-image do CSS pareça estar sendo usada. Tudo o que você precisa fazer é colocar a imagem dentro de um contêiner position: relative;. Aqui está como a marcação do HTML, no geral, se parece:

<div class="demo_wrap">
  <h1>Hello World!</h1>
  <img src="https://assets.digitalocean.com/labs/images/community_bg.png">
</div>

E aqui está como o seu CSS ficará:

.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;
}

O truque aqui é colocar a imagem de forma absoluta e estendê-la de forma a preencher todo o contêiner pai. E posicionar todo o resto relativamente, para que seja possível definir um z-index que coloca tudo acima da imagem.

Aqui está uma demonstração:

Hello World!

Método 2: usando os pseudoelementos do CSS

Este método já parece ser simples assim que você o vê, e é definitivamente minha maneira preferida de fazer isso. Usando os pseudoelementos do CSS :before ou :after, você aplica o div com uma imagem de fundo e define uma opacidade nela. Aqui está como sua marcação HTML irá ficar:

<div class="demo_wrap">
  <h1>Hello World!</h1>
</div>

E aqui está como o CSS irá ficar:

   .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;
}

Aqui, é necessário mover novamente o z-index do conteúdo (neste caso, o <h1>) para cima do pseudoelemento de fundo e também precisamos definir explicitamente position: absolute; e z-index: 1 no pseudoelemento :before.

O resto dos atributos no pseudoelemento existem para posicioná-lo de forma a sobrepor 100% do pai, além de fazer uso de uma nova propriedade inteligente do CSS: background-size: cover que ajusta o fundo para cobrir o elemento sem alterar proporções. Aqui está uma pequena demonstração desse 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?
 
Leave a comment


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!

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