Puoi sovrapporre un gradiente css3 trasparente a un'immagine di sfondo?

Question

Sto provando a mettere un gradiente css3 sopra l'immagine di sfondo. Usando il codice qui sotto si mette un'immagine di sfondo sopra il mio gradiente, ma sto cercando di farlo al contrario, quindi il gradiente funge da maschera in alto.

url(images/darkwood.png), 
-webkit-gradient(linear, 0 0, 0 100%, from(#EEF), to(#000)) 300px 50px no-repeat, 
-webkit-gradient(linear, 0 0, 0 100%, from(#EFE), to(#000)) 0 0 no-repeat; 
background: 
url(images/darkwood.png), 
-moz-linear-gradient(#EEF, rgba(0,0,0,1)) 300px 50px no-repeat, 
-moz-linear-gradient(#EFE, rgba(0,0,0,1)) 0 0 no-repeat; 

Grazie per il vostro aiuto

Answer 1

devo farlo per uno del mio sito, spero che sia il lavoro per voi;

body { 
    margin: 0; 
    padding: 0; 
    background: url('img/background.jpg') repeat; 
} 

body:before { 
    content: " "; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%); 
} 

Answer 2

L'esempio precedente non funzionerà con div ridimensionabili.

Il tuo codice funzionerebbe correttamente. Ma a quanto ho capito, i CSS leggono da destra a sinistra. Quindi si dovrà utilizzare il seguente:

div { 
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%), url('http://www.google.co.uk/logos/classicplus.png') repeat; 
} 

Esempio: http://sapphion.com/2011/11/css3-background-gradient-on-top-of-an-image/