// Tutorial //

Como alterar a opacidade de uma imagem de fundo do CSS

Published on February 19, 2021
Default avatar
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!

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?
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!