Posso ver em referências CSS como definir a transparência da imagem e como definir uma imagem de fundo. Mas como eu posso combinar estes dois para definir uma imagem de fundo transparente?
Eu tenho uma imagem que I'gostaria de usar como fundo, mas é muito brilhante - I'gostaria de reduzir a opacidade para cerca de 0.2. Como eu posso fazer isso?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}
#main {
position: relative;
}
#main:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
width: 100%;
height: 100%;
opacity : 0.2;
z-index: -1;
}
Dois métodos:
<div>
que é posição: absoluta;
antes de #main
e a mesma altura que #main
, então aplique a imagem de fundo e opacidade: 0.2; filtro: alpha(opacity=20);
.Bem, a única maneira do CSS de fazer apenas transparência de fundo é via RGBa
mas como você quer utilizar uma imagem eu sugeriria utilizar o Photoshop ou o Gimp para tornar a imagem transparente e depois utilizá-la como fundo.