Existe alguma possibilidade de dar atributos para um item linkado via CSS?
#content-homepage {
background-image: url(../img/back.jpg);
}
Queria diminuir a opacidade dessa imagem
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeopcao 1: opacity
funciona em todos veja em https://developer.mozilla.org/en-US/docs/Web/CSS/opacity#Browser_compatibility
div.exemplo{
width:150px;
height:150px;
background: url('https://i.imgur.com/r3MHkRT.jpg');
opacity: 0.5
}
<div class="exemplo"></div>
Opcao 2: filter
veja as
compatibilidades: https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility_2
div.exemplo{
width:150px;
height:150px;
background: url('https://i.imgur.com/r3MHkRT.jpg');
filter: opacity(50%)
}
<div class="exemplo"></div>
Veja este exemplo:
div.teste {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div.teste::after {
content: "";
background: url('https://i.imgur.com/hlwO5D2.png');
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
/* z-index: -1; */
}
<div class="teste">
</div>
Basta aplicar no seu projeto e voalá!
Caso o fundo esteja sobrepondo algum elemento do seu projeto, basta descomentar a linha do z-index conforme seus elementos.