Superposición de degradado en CSS: teñir y oscurecer imágenes bien

La superposición de degradado en CSS más sencilla es un fondo por capas: background-image: linear-gradient(rgb(2 6 23 / 0.6), rgb(2 6 23 / 0)), url(photo.jpg). Las capas que se escriben primero se dibujan encima, así que el degradado queda sobre la foto. Cuando la imagen es un elemento <img>, pon el degradado en un pseudoelemento, y cuando quieras que el color tiña la foto en lugar de taparla, añade un modo de fusión. Cada método sirve para un trabajo distinto.

Método 1: un fondo por capas

background-image acepta una lista separada por comas. El primer valor es la capa de arriba. Degradados e imágenes se mezclan libremente, y cada capa puede tener su propio tamaño y posición si escribes esas propiedades en el mismo orden. Es la opción adecuada para imágenes decorativas que no necesitan texto alternativo.

.banner {
  background-color: #0f172a; /* shows until the photo loads */
  background-image:
    linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%),
    url("/images/workshop.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}

Las franjas arriba y abajo van bien en galerías con un título arriba y un crédito abajo. La viñeta lleva la mirada hacia dentro sin sostener texto. El tinte de marca es un estilo potente para páginas de equipo y banners de eventos; superposiciones de degradado explica cuándo encaja cada una desde el punto de vista del diseño.

Método 2: un pseudoelemento sobre un img

Las imágenes de contenido van en elementos <img>: tienen texto alternativo, srcset adaptable, carga diferida y el navegador las descubre pronto. Un degradado de fondo no puede ir sobre un <img>, así que envuélvelo y pon el degradado en el pseudoelemento del contenedor.

<figure class="overlay">
  <img src="/images/harbour.jpg" alt="Fishing boats moored in a small harbour at dusk"
       width="1920" height="1080" fetchpriority="high">
  <figcaption>Harbour Days, 14 to 16 June</figcaption>
</figure>

.overlay {
  position: relative;
  margin: 0;
  isolation: isolate;
}

.overlay img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(2 6 23 / 0.75), rgb(2 6 23 / 0) 60%);
  pointer-events: none;
  transition: opacity 250ms ease-out;
}

.overlay figcaption {
  position: absolute;
  inset: auto 1.5rem 1.5rem;
  z-index: 1;
  color: #f8fafc;
}

.overlay:hover::after { opacity: 0.6; }

Para una imagen de cabecera que es lo más grande de la pantalla, el segundo método suele ganar en velocidad de carga. Optimizar imágenes para la web explica por qué el navegador encuentra los elementos <img> antes que los fondos CSS.

Método 3: modos de fusión para baños de color

Una capa normal se apoya sobre la foto como un cristal tintado. Un modo de fusión mezcla el degradado con las luces y sombras de la propia foto, lo que parece más bien que la foto se hizo en ese color. Usa background-blend-mode para fondos por capas y mix-blend-mode en un pseudoelemento sobre un <img>.

/* Duotone wash on a layered background */
.duotone {
  background-image:
    linear-gradient(135deg, #1e1b4b 0%, #f472b6 100%),
    url("/images/portrait.jpg");
  background-size: cover;
  background-blend-mode: color;
}

/* The same idea over an img element */
.overlay--wash::after {
  background: linear-gradient(135deg, #1e1b4b, #f472b6);
  mix-blend-mode: color;
}

La técnica completa, incluido cómo elegir los dos colores, está en el efecto duotono.

Superposiciones que mantienen el texto legible

El error más habitual es una película oscura uniforme sobre toda la foto, por ejemplo negro al 50 por ciento. Apaga la imagen en todas partes y aun así puede no ser lo bastante oscura detrás de las palabras. Dale forma a la capa: más oscura bajo el texto y transparente donde importa la foto.

1. 1

   Decide dónde van las palabras

   Abajo a la izquierda para los pies, en el tercio izquierdo para el texto de cabecera, en el centro para una sola línea.

2. 2

   Orienta el degradado hacia ellas

   Usa to top para texto abajo, to right para texto a la izquierda, o un radial centrado en las palabras.

3. 3

   Termina pronto

   Llega a la transparencia total hacia el 60 o 70 por ciento para que la mayor parte de la foto quede intacta.

4. 4

   Revisa el peor caso

   Mide el contraste donde la foto es más luminosa detrás de una letra. Contraste de color y accesibilidad recoge las relaciones.

Las capas suavizadas con muchas paradas se ven más suaves que un fundido de dos paradas; el método está en degradados transparentes en CSS.

Superposiciones sin conjeturas

En una web ajustas cada superposición a mano. Para posts, banners y diapositivas, Gradiently se salta ese paso: un Mark sabe dónde están tus palabras y oscurece o aclara sus propios colores detrás de ellas, las fotos se pueden teñir con los colores del Mark en mono, duotono o baño de color, y con Pro el diseño cambia a todos los formatos en un solo paso, sin ninguna capa que rehacer.