La propiedad background en CSS puede aceptar valores separados por comas. Fondos “múltiples”, por así decirlo. También puede pensar en ellos como fondos en capas, ya que tienen un orden de apilamiento. Si colocamos un color transparente sobre una imagen, podemos “teñir” esa imagen. Pero no es tan obvio como podría sospechar.
Mi primera suposición intuitiva al hacer esto sería así:
/* Warning: this doesn't work */
.tinted-image {
background:
/* top, transparent red */
rgba(255, 0, 0, 0.25),
/* bottom, image */
url(image.jpg);
}Desafortunadamente, eso no es válido. No estoy del todo seguro de por qué. Hace un tiempo cuando yo se quejó en Twitter al respecto Tengo una variedad de ideas / razones / excusas. Ninguno de ellos me pareció muy cierto. Es cierto que no se pueden separar por comas background-color, pero no creo que eso sea relevante aquí, ya que estoy separando con comas los background taquigrafía no específicamente background-color (sin mencionar que ordenar esos valores al revés funciona bien).
Sospecho que la verdadera razón por la que se decidió es porque sería demasiado fácil para los autores equivocarse. fondo: verde, url (image.jpg); “fallaría” en el sentido de que simplemente inundaría el verde de fondo. Forzar que el color sea el último hace que el color sea como un “respaldo” en lugar de una capa como cualquier otra.
Desafortunadamente, tampoco podemos simplemente dejar el color en la parte inferior y ajustar la opacidad de la imagen para permitir que salga algo de ese color, porque la opacidad del fondo no es una cosa. (Aunque puedes fingirlo).
¡Sin embargo, hay una manera!
En lugar de usar un color de inundación transparente usando rgba () o hsla (), podemos usar un degradado. Los gradientes son técnicamente background-images y, por lo tanto, no están sujetos a la regla en la que no pueden ir primero (ser los primeros) en el orden de apilamiento.
/* Working method */
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}Vea la imagen teñida con lápiz con múltiples fondos de Chris Coyier (@chriscoyier) en CodePen
Oye, lo que sea que funcione, ¿verdad?