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

Estoy tratando de poner un degradado css3 sobre la parte superior de una imagen de fondo. Usar el código a continuación coloca una imagen de fondo encima de mi degradado, pero estoy tratando de 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 su ayuda

preguntado el 08 de noviembre de 11 a las 10:11

Puedes hacer un Demostración de jsFiddle de lo que tienes hasta ahora? Puedes subir la imagen aquí. -

3 Respuestas

He hecho esto para uno de mis sitios web, espero que funcione para usted;

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

Respondido 27 Jul 18, 16:07

He estado buscando algo que haga esto durante mucho tiempo. El único cambio que hice fue position: fixed. - seaneshbaugh

El ejemplo de esta respuesta no funcionará con divs redimensionables.

Tu código funcionaría bien. Pero según tengo entendido, CSS se 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/

Respondido 27 Jul 18, 16:07

Puede ser de ayuda:

yourselector {
    background: linear-gradient(rgba(0,130,170,0),rgba(0,130,170,1)), url('/path/image.jpg');
}

Para más estilo de degradado, visite: https://www.colorzilla.com/gradient-editor/

respondido 25 mar '21, 15:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.