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