4

div {
  background: #000;
  width: 640px;
  height: 640px;
  opacity: 0.2;
  position: absolute;
  z-index: 99;
}
<span>
  <div></div>
  <img src="https://scontent.cdninstagram.com/t51.2885-15/e15/11909170_999395153465997_38853384_n.jpg?ig_cache_key=MTA1NTI1MTUxNDA0OTkxNDkyMg%3D%3D.2" alt="">
</span>

Ilustração:

Foto sem fundo colorido:

inserir a descrição da imagem aqui

Foto com fundo colorido

inserir a descrição da imagem aqui

A minha gambiarra até funcionou, mas queria aprender do modo certo.

9
  • 1
    Cara, isso é uma característica da imagem, você precisa edita-la utilizando GIMP, Photoshop..., para conseguir esse efeito. Você também precisa "colorir" o fundo do elemento "pai", onde a imagem está contida. Mas aparentemente você já está fazendo isso. Então, seu problema é com a imagem mesmo.
    – mau humor
    12/01/2017 às 4:23
  • 2
    O que você quer fazer exatamente? Que a imagem pegue o "fundo do teu site"? ou você quer colocar uma camada semitransparente em cima da imagem?
    – mau humor
    12/01/2017 às 4:31
  • 2
    Então, este é o "jeito certo" creio eu. É assim que fazem quando mostram uma imagem, ou propaganda, bloqueando o resto do site. Mas ainda deixando visível. Se você quer que a imagem pegue o que está embaixo. Ai teria que editar, como já falei antes.
    – mau humor
    12/01/2017 às 4:34
  • 2
    @mauhumor, não é necessário editar a imagem no photoshop, ele consegue facilmente dar esse efeito na imagem como mostrado em minha resposta :) 12/01/2017 às 12:51
  • 2
    No meu entendimento background é o que fica por trás, no seu caso é um "background na frente"? Não quer editar a pergunta e deixar isso mais claro? 12/01/2017 às 14:08

5 Respostas 5

7

Além das soluções que apresentaram, pode usar a técnica de múltiplos backgrounds, basta usar linear-gradient passando dois valores de cores rgba junto à url da imagem:

div {
  height: 262px;
  width: 389px;
  background:
    linear-gradient(
      rgba(0,0,0,.3),rgba(0,0,0,.3)
    ),
    url(https://i.stack.imgur.com/0VvBr.jpg) no-repeat;
}
<div></div>

Outro exemplo:

div {
  height: 262px;
  width: 389px
}

div.red {
  background:
    linear-gradient(
      rgba(255,0,0,.3),rgba(255,0,0,.3)
    ),
    url(https://i.stack.imgur.com/0VvBr.jpg) no-repeat
} 

div.green {
  background:
    linear-gradient(
      rgba(0,255,0,.3),rgba(0,255,0,.3)
    ),
    url(https://i.stack.imgur.com/0VvBr.jpg) no-repeat
}

div.blue {
  background:
    linear-gradient(
      rgba(0,0,255,.4),rgba(0,0,255,.4)
    ),
    url(https://i.stack.imgur.com/0VvBr.jpg) no-repeat
}
<div class='red'></div>
<div class='green'></div>
<div class='blue'></div>

6

Se sua imagem tiver partes transparentes basta setar o background normalmente:

#a{background:orange}
#b{background:green}
#c{background:blue}
<img id="a" src="http://www.gravatar.com/avatar/162a62cf2058d7dd8d549dd6bd3b46f9">
<img id="b" src="http://www.gravatar.com/avatar/162a62cf2058d7dd8d549dd6bd3b46f9">
<img id="c" src="http://www.gravatar.com/avatar/162a62cf2058d7dd8d549dd6bd3b46f9">

4

Basta utilizar as propriedades :before ou :after, no caso, seria melhor o :after por exemplo, o seu código ficaria assim:

CSS

span{
        position:relative;
    }
    div{
        width: 640px;
        height: 640px;
        opacity: 1;
        position: absolute;
    }
    div:after{
        content:'';
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background-color:rgba(0,0,0,.6);
    }
    div img{
        width:100%;
    }

HTML

<span>
  <div>
     <img src="https://scontent.cdninstagram.com/t51.2885-15/e15/11909170_999395153465997_38853384_n.jpg?ig_cache_key=MTA1NTI1MTUxNDA0OTkxNDkyMg%3D%3D.2" alt="">
  </div>
</span>

Agora, para explicar melhor, as propriedades :before e :after servem para que possamos controlar um único elemento como se fossem camadas dele, antes e depois, o :after foi colocado como absoluto para podermos usar a posição de acordo com top,left,right e bottom, o span tem de ser setado como relativo, pois como deve saber, o position absolute responde ao primeiro pai que for relativo. Então para setar a propriedade :before/:after precisamos dizer, qual o conteúdo, daí o content:''; para mostrar que o conteúdo é vazio e a propriedade ser apresentada ao usuário final da forma correta, então dou um background-color no after, e já coloco a opacidade junto com o rgba(0~255,0~255,0~255,0~1).

É como se criasse no photoshop uma layer por cima do seu elemento, e desse a ela propriedades comuns a um elemento

4

A sua "gambiarra" funcionou para o seu teste, porque a imagem e a div estão no mesmo tamanho, experimente trocar de imagem. Vai ficar um quadrado cinza em volta da imagem. Isso porque você setou as propriedade na div que a imagem está e não na imagem propriamente dita. Veja:

div {
  background: #000;
  width: 640px;
  height: 640px;
  opacity: 0.2;
  position: absolute;
  z-index: 99;
}
<span>
  <div></div>
  <img src="https://i.stack.imgur.com/0VvBr.jpg" alt="">
</span>

Isso funciona, se a imagem tiver o mesmo tamanho. Agora veja se você colocar a propriedade filter: brightness(50%); na imagem, independente do tamanho da div ela vai funcionar com o efeito que você quer. Veja:

img {
    filter: brightness(50%);
}
<span>
  <div></div>
  <img src="https://i.stack.imgur.com/0VvBr.jpg" alt="">
</span>

A propriedade brightness ajusta o brilho da imagem. Você pode ver a compatibilidade dos filtros nesse site.

1
3

Você pode setar a propriedade de background-color, mas ela fará diferença se a imagem não sobrepor toda a área do background:

<!DOCTYPE html>
<html>
    <head>
        <style> 
            body {  
                background-image: url("img_tree.gif"), url("img_flwr.gif");
                background-color: #dddddd;
                opacity: 0.5;
                filter: alpha(opacity=50);
            }
        </style>
    </head>
    <body>

    </body>
</html>

Uma melhor solução seria a utilização da propriedade Opacidade/Transparencia:

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {
                opacity: 0.5;
                filter: alpha(opacity=50); /* For IE8 and earlier */
            }
        </style>
    </head>
    <body>

        <h1>Image Transparency</h1>
        <p>The opacity property specifies the transparency of an element. The lower  the value, the more transparent:</p>

        <p>Image with 50% opacity:</p>
        <img src="img_forest.jpg" alt="Forest" width="170" height="100">

    </body>
</html>

Consulte mais:

3
  • desconhecia tal propriedade (filter), muito bom :) 12/01/2017 às 13:06
  • Não esqueça de mencionar a compatibilidade dos filtros: can I use css filters? 12/01/2017 às 13:27
  • Não conhecia essa propriedade. Muito obrigado pela ajuda. 12/01/2017 às 18:41

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 .