Un efecto que se ha puesto de moda en el diseño web son las hero images cubiertas por una capa de algún color (como el encabezado de este post). El efecto es muy bonito y ayuda a la marca a reforzar su identidad. Ahora bien, ¿cómo se consigue? podrías usar fotos de stock y Photoshop (u otro programa de diseño) pero con CSS y un poquito de imaginación (y otro poco de teoría) podemos conseguirlo.
Forma fácil
Necesitamos dos capas, una para la imagen y una para el color. Ambos elementos se imprimirán por CSS con la propiedad background. Podríamos usar dos elementos div pero semánticamente es malo y desde el punto de vista técnico es peor porque para eso tenemos los pseudoelementos.
.hero-img {
background : url(image.jpg) center / cover;
position : relative;
}
.hero-img::before {
content : "";
background : green; // remplazalo por el color que desees;
display : block;
position : absolute;
width : 100%;
height : 100%;
opacity : 0.9; // aquí está la magia
}Mira este ejemplo funcionando:
See the Pen Background color and img (pseudoelementos) by Alvaro Felipe (@AlvaroFelipe) on CodePen.
Estilo maestro Jedi
Crear un pseudoelemento funciona, pero es mucho código, hay que trabajar con posicionamiento y apilamiento de capas. Además debes recordar de añadir un position: relative a los hijos (como texto) para que la capa de color no los tape. Tranquilo, hay una forma mejor (y más sencilla). Si tienes clara la teoría, sabrás que podemos crear un background que contenga tanto a una imagen como a un color (en la misma declaración). Algo así:
.hero-img {
background: url(img.jpg) green;
}Funciona, pero malas noticias, no hay forma de que el color sea semitransparente. La imagen irá por encima siempre y a menos que sea de menor tamaño que el area disponible o tenga secciones transparentes, jamás verás el color. La razón es nuevamente de teoría: la propiedad backgroud es un shorthand para varias propiedades como background-color y background-image. Y mientras background-image tiene tamaño, posición, repetición, etc. backround-color no y siempre se extiende a toda el área disponible (o la indicada en background-clip). Así que de esta forma siempre la imagen cubrirá al color y necesitarías una imagen semitransparente, es decir, pasar por Photoshop y exportar un png (que puede pesar muchísimo más).
Pero tranquilo, hay una forma limpia de lograrlo. Desde CSS3 podemos usar fondos múltiples separados por comas. Pero ten cuidado, ya que si intentas hacer lo siguiente no funcionará (por la misma razón indicada antes):
.hero-img {
background: url(img.jpg), green;
}Así que el truco, nuevamente, es entender la teoría: los degradados, aunque son de color, son renderizados por el navegador como imágenes (con la propiedad background-image). Así que para conseguir un color sólido hacemos un degradado que comience y termine en el mismo color. Recuerda que el color debe tener transparencia sino nunca veremos la imagen detrás.
.hero-img {
background : linear-gradient(rgba(0,255,0,.9),rgba(0,255,0,.9)),
url(image.jpg) center / cover;
}Listo, ¡en una sola línea! (aunque la he separado en dos solo para leerla mejor). Sin embargo, si queremos cambiar el color o la transparencia hay que hacerlo en dos lugares (dentro del degradado) y deja de ser cool. Lo solucionamos con variables CSS.
.hero-img {
--color : rgba(0,255,0,.9);
background : linear-gradient(var(--color),var(--color)),
url(image.jpg) center / cover;
}Ahora sí, dos líneas pero mantenible y escalable. Basta editar el valor de la variable --color de ser necesario y disfrutar de todo tu nuevo tiempo libre.
See the Pen Background color and img by Alvaro Felipe (@AlvaroFelipe) on CodePen.
Estilo maestro Jedi, versión 2 (estilo EDteam)
Hasta ahora estamos pasando la imagen como background, pero ¿que pasa si es un elemento HTML que viene de una base de datos o una API? Tranquilo, estás en EDteam.
.hero-img {
background : green;
}
.hero-img img {
width : 100%;
height : 100%;
object-fit : cover;
opacity : 0.1;
position : absolute;
}La propiedad object-fit ajusta al elemento embebido a su contenedor como si se tratará de un fondo (usamos tambien position: absolute para que salga de su flujo en el layout). Y si quieres posicionarlo (como con background-position) basta con usar object-position, ya te toca a ti hacer las pruebas. Mira el resultado:
See the Pen Background color and html image by Alvaro Felipe (@AlvaroFelipe) on CodePen.
Ahora ya no tienes excusas para implementar hermosos diseños en tus proyectos. Recuerda que si quieres ser puedes tomar nuestro curso de CSS gratuito para dominar el diseño web.