texto - fondo degradado transparente css

¿Se puede superponer un degradado css3 transparente sobre una imagen de fondo?

Question

Estoy intentando colocar un gradiente css3 sobre la imagen de fondo. Usar el código de abajo coloca una imagen de fondo en la parte superior de mi degradado, pero estoy intentando hacerlo al revés, por lo que el degradado actúa como una máscara en la parte superior.

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;

Gracias por tu ayuda

Answer 1

El ejemplo share no funcionará con divs ajustables.

Su código funcionaría bien. Pero como lo entiendo, CSS lee de derecha a izquierda. Entonces tendrías que usar lo siguiente:

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

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

Answer 2

Tengo que hacer esto para uno de mi sitio web, espero que sea un trabajo para ti;

body {
 margin: 0;
 padding: 0;
 background: url(''https://i.stack.imgur.com/MUsp6.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%);
}