1

Digamos que tenha definido uma imagem como background de uma div da seguinte forma:

#div {
  background: #111111 url(../imagens/imagem1.jpg) top center;
  background-size: cover;

Como faço para alterar as propriedades dessa imagem por exemplo:

filter: grayscale(100%);
opacity: 0.2;

É possível fazer essas alterações somente na imagem? Pois se adicionar essas linhas junto com a outra parte código, as alterações irão ser feitas em toda a Div, e não é isso que eu quero.

1
  • Eu penso que quando você usa uma div e utiliza uma imagem como background, seu elemento é uma div, então você tem 2 caminhos, criar uma div só para a imagem e outra como wrapper, ou usa a tag img do html.
    – MagicHat
    28/05/2018 às 22:52

3 Respostas 3

1

Cara basta colocar tudo no pseudo elemento ::after da div por exemplo, a imagem pode ser como BG não precisa ser uma <img> dentro da div

h1 {
    color: red;
}
div{
    width: 200px;
    height: 200px;
    position:relative
}
div::after {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(http://placecage.com/200/200);
    filter: grayscale(100%);
    opacity: 0.5;
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
}
<div>
    <h1>Teste</h1>
</div>

0

Propriedades filter e opacity não são aplicáveis a imagens de fundo, apenas à elementos, como uma div, por exemplo. Se você quiser uma imagem de fundo com opacidade 0.2, teria que criar um PNG com o alpha em 20%.

Mas existe uma gambiarra forma em que você pode emular uma imagem de fundo criando uma camada com posição absolute com um elemento <img>, então você pode aplicar as propriedades ao elemento <img> de forma independente da div.

Exemplo:

#div{
   width: 300px;
   height: 200px;
   color: red;
   position: relative;
}

#div img{
   filter: grayscale(100%);
   opacity: 0.2;
   position: absolute;
   left: 0;
   width: 100%;
   z-index: -1;
}
<div id="div">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
   <p>texto texto<p>
</div>

0

Você está atribuindo as propriedades da ´div´ com:

#div {
  background: #111111 url(../imagens/imagem1.jpg) top center;
  background-size: cover;
  filter: grayscale(100%);
  opacity: 0.2
}

Para que a imagem fique com o comportamento independente da <div> use <img> dentro de uma div ao invés de background: #111111 url(../imagens/imagem1.jpg) top center.

Veja:

<html>
    <head>
    <style>
    img {
        opacity: 0.5;
        filter: alpha(opacity=50); /* For IE8 and earlier */
    }
    
    img:hover {
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }
    div {
        background-color: black;
        opacity: 1.0;
        width:600px;
        height: 100px;
    }
    </style>
    </head>
    <h1>Image Transparency</h1>
    
    <div><img src="http://placecage.com/200/200" alt="nothing" width="170" height="100"></div>
    
    </body>
    </html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .