CSS: définir l'image d'arrière-plan avec l'opacité?

Question

Donc, je peux voir dans CSS comment définir la transparence de l'image et comment définir une image d'arrière-plan , mais comment puis-je combiner les deux pour définir une image d'arrière-plan transparente?

J'ai une image que je voudrais utiliser comme arrière-plan, mais elle est beaucoup trop claire - je voudrais réduire l'opacité à environ 0,2. Comment puis-je faire ceci?

 #main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}
 

Answer 1

 #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;
}
 

Edit: Ajout de points-virgules

Answer 2

Deux méthodes:

1. Convertir en PNG et rendre l'image originale 0.2 opacité
2. (Meilleure méthode) a <div> qui est position: absolute; avant #main et la même hauteur que #main , puis appliquez l'image d'arrière-plan et opacity: 0.2; filter: alpha(opacity=20); .

Answer 3

Solution 1 div et NON transparentes de l'image:

Vous pouvez utiliser le multibackground CSS3 fonctionnalité et de mettre deux origines: l'une avec l'image, l'autre avec un panneau transparent (car je pense que il n'y a aucun moyen de définir directement l'opacité de l'image d'arrière-plan):

background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

Vous ne pouvez pas utiliser rgba(255,255,255,0.5) parce que, seul, il n'est accepté sur le dos, de sorte que vous j'ai utilisé généré des gradients pour chaque navigateur pour cet exemple (c'est pourquoi il est si long). Mais le concept est le suivant:

background: tranparentColor, url("myImage"); 

http://jsfiddle.net/pBVsD/1/

Answer 4

Eh bien, la seule façon CSS de ne faire que la transparence de l’arrière-plan est via RGBa mais comme vous voulez utiliser une image, je vous suggère d’utiliser Photoshop ou Gimp pour la rendre transparente.