Je peux voir dans les références CSS [comment définir la transparence d'une image][1] et [comment définir une image de fond][2]. Mais comment puis-je combiner ces deux éléments afin de définir une image d'arrière-plan transparente ?
J’ai une image que j’aimerais utiliser comme arrière-plan, mais elle est trop lumineuse - j’aimerais réduire l’opacité à environ 0,2. Comment puis-je faire cela ?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}
[1] : http://www.w3schools.com/css/css_image_transparency.asp [2] : http://www.w3schools.com/css/css_background.asp
#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;
}
Deux méthodes :
<div>
qui est position : absolute;
avant #main
et la même hauteur que #main
, puis appliquer l'image de fond et opacity : 0.2 ; filter : alpha(opacity=20);
.La seule façon de faire de la transparence d'arrière-plan en CSS est de passer par RGBa
mais puisque vous voulez utiliser une image, je vous suggère d'utiliser Photoshop ou Gimp pour rendre l'image transparente et l'utiliser comme arrière-plan.