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.
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:
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:
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
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!