¿Cómo puedo utilizar gradientes CSS3 para mi "color de fondo" y luego aplicar una "imagen de fondo" para aplicar algún tipo de textura transparente de luz?
¡Múltiples fondos!
body {
background: #eb01a5;
background-image: url("IMAGE_URL"); /* fallback */
background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}
Estas 2 líneas son el fallback para cualquier navegador que no haga gradientes. Ver notas para apilar imágenes sólo IE < 9 a continuación.
La línea final establece una imagen de fondo y un gradiente para los navegadores que pueden manejarlos.
Casi todos los navegadores actuales tienen soporte para múltiples imágenes de fondo y fondos css. Consulte http://caniuse.com/#feat=css-gradients para conocer el soporte de los navegadores. Para un buen post sobre por qué no necesitas múltiples prefijos de navegador, ver http://codepen.io/thebabydino/full/pjxVWp/
Pila de capas
Hay que tener en cuenta que la primera imagen definida será la más alta de la pila. En este caso, la imagen está encima del gradiente.
Para más información sobre la estratificación del fondo, consulte http://www.w3.org/TR/css3-background/#layering.
Apilando imágenes SOLO (sin gradientes en la declaración) Para IE < 9
IE9 y superiores pueden apilar imágenes de esta misma manera. Usted podría utilizar esto para crear una imagen de gradiente para ie9, aunque personalmente, no lo haría. Sin embargo hay que tener en cuenta que cuando se usan sólo imágenes, ie < 9 ignorará la declaración fallback y no mostrará ninguna imagen. Esto no ocurre cuando se incluye un gradiente. Para usar una sola imagen fallback en este caso sugiero usar el maravilloso Elemento HTML condicional de Paul Irish junto con su código fallback:
.lte9 #target{ background-image: url("IMAGE_URL"); }
**Posición del fondo, tamaño, etc.
Otras propiedades que se aplicarían a una sola imagen también pueden estar separadas por comas. Si sólo se proporciona un valor, éste se aplicará a todas las imágenes apiladas, incluyendo el gradiente. El valor background-size: 40px;
limitará tanto la imagen como el degradado a 40px de altura y anchura. Sin embargo, el uso de background-size: 40px, cover;
hará que la imagen sea de 40px y que el degradado cubra el elemento. Para aplicar un ajuste sólo a una de las imágenes, establezca el valor predeterminado para la otra: background-position: 50%, 0 0;
o para los navegadores que lo soportan utilice initial
: background-position: 50%, initial;
También puede utilizar la abreviatura de fondo, sin embargo, esto elimina el color y la imagen de reserva.
body{
background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}
Lo mismo se aplica a background-position, background-repeat, etc.
Una cosa que hay que tener en cuenta es que la primera imagen de fondo definida está más arriba en la pila. La última imagen definida será la inferior. Esto significa que, para tener un gradiente de fondo detrás de una imagen, usted necesitaría:
body {
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
}
También podrías definir posiciones de fondo y tamaño de fondo para las imágenes. Puse una entrada de blog sobre algunas cosas interesantes que puedes hacer con gradientes CSS3
Yo estaba tratando de hacer lo mismo. Mientras que el color de fondo y la imagen de fondo existen en capas separadas dentro de un objeto -lo que significa que pueden coexistir- los gradientes CSS parecen cooptar la capa de imagen de fondo.
Por lo que puedo ver, border-image parece tener un soporte más amplio que los fondos múltiples, así que tal vez sea un enfoque alternativo.
http://articles.sitepoint.com/article/css3-border-images
ACTUALIZACIÓN: Un poco más de investigación. Parece que Petra Gregorova tiene algo que funciona aquí --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html