Puis-je définir l'image de fond et l'opacité dans la même propriété ?

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&#8217ai une image que j&#8217aimerais utiliser comme arrière-plan, mais elle est trop lumineuse - j&#8217aimerais réduire l&#8217opacité à 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

TylerH
Question modifiée 3 janvier 2019 в 8:11
Programmation
css
15 novembre 2010 в 11:37
1 voir
#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;
}
Nisse Engström
Réponse modifiée 17 septembre 2018 в 10:01
Commentaires (11)
Solution

Deux méthodes :

  1. Convertir en PNG et donner à l'image originale une opacité de 0,2.
  2. (Meilleure méthode) avoir un <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);.
TylerH
Réponse modifiée 22 septembre 2014 в 2:54
Commentaires (4)

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.

Commentaires (2)