Czy można nakładać przezroczysty gradient css3 na obraz tła?

Question

Próbuję umieścić gradient css3 na górze obrazu tła. Korzystanie z poniższego kodu powoduje umieszczenie obrazu tła na górze gradientu, ale próbuję zrobić to na odwrót, więc gradient działa jak maska ​​na wierzchu.

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; 

Dzięki za pomoc

Answer 1

muszę to zrobić dla jednego z mojej strony, mam nadzieję, że to praca dla ciebie;

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

Powyższy przykład nie działa z wymiennymi elementami div.

Twój kod będzie działał poprawnie. Ale jak rozumiem, CSS czyta od prawej do lewej. Więc trzeba by użyć następujących:

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

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