Table of Contents
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://www.progressiverobot.com/images/how-to-change-a-css-background-images-opacity-pt-section-1.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:
<style>
.demo_wrap {
position: relative;
overflow: hidden;
padding: 16px;
border: 1px dashed green;
}
.demo_wrap h1 {
padding: 50px;
position: relative;
z-index: 2;
}
.demo_wrap img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0.6;
border: none;
}
</style>
<div class="demo_wrap">
<h1>Hello World!</h1>
<img src="images/how-to-change-a-css-background-images-opacity-pt-section-1.png;
</div>
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('images/how-to-change-a-css-background-images-opacity-pt-section-1.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:
<style>
.demo_wrap2 {
position: relative;
overflow: hidden;
padding: 16px;
border: 1px dashed green;
}
.demo_wrap2 h1 {
padding: 50px;
position: relative;
z-index: 2;
}
.demo_wrap2:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url('images/how-to-change-a-css-background-images-opacity-pt-section-1.png;);
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}
</style>
<div class="demo_wrap2">
<h1>Hello World!</h1>
</div>
