Como alterar a opacidade de uma imagem de fundo do CSS

Published on February 20, 2021

CSS

By Nicholas Cerminara, Andy Hattemer and Andy Hattemer

Language

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: