Immagine di sfondo trasparente

[ciucciatiilcalzino]

Ciao a tutti,
volevo chiedervi se esiste la possibilità con un css di dare dell'opacità all'immagine di sfondo impostata tramite css.
In pratica ad un div imposto lo sfondo con il
background-image:url
Se gli do la proprietà opacity mi da opaco anche il testo al suo interno.

[carlomarangoni]

...
Se gli do la proprietà opacity mi da opaco anche il testo al suo interno.

Ovvio!! L'opacità va data al backhround non al div

[ciucciatiilcalzino]

Ovvio!! L'opacità va data al backhround non al div

e come la do al background????

[Mich_]

http://forum.html.it/forum/showthrea...readid=2918768

[KillerWorm]

http://forum.html.it/forum/showthrea...readid=2918768

La discussione è simile ma in quel caso si trattava di impostare l'opacità sul colore di sfondo.
In questo caso si chiede invece di impostare l'opacità sull'immagine di sfondo.

Si può agire principalmente in due modi:

1. Agire sul file immagine. Puoi usare un'immagine png a cui applichi direttamente, con un qualsiasi programma di grafica, la dovuta trasparenza.
2. Tramite CSS. Puoi applicare al tuo div il pseudo-elemento before (o after) a cui assegni l'immagine di sfondo e imposti, a questo, l'opacità:

   #tuodiv {
     position: relative;
   }
   #tuodiv:before {
     content : "";
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     background-image: url(image.jpg); 
     width: 100%;
     height: 100%;
     opacity : 0.5;
     z-index: -1;
   }

(fonte)