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://1linux.info/wp-content/uploads/2021/03/community_bg-3.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://1linux.info/wp-content/uploads/2021/03/community_bg-3.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!