Gradient overlay CSS: come colorare e scurire le immagini

Il più semplice gradient overlay CSS è uno sfondo a livelli: background-image: linear-gradient(rgb(2 6 23 / 0.6), rgb(2 6 23 / 0)), url(photo.jpg). I livelli elencati per primi sono disegnati sopra, quindi il gradiente sta sopra la foto. Quando l'immagine è un elemento <img>, metti invece il gradiente su uno pseudo-elemento, e quando vuoi che il colore tinga la foto invece di coprirla, aggiungi una blend mode. Ogni metodo si adatta a un lavoro diverso.

Metodo 1: uno sfondo a livelli

background-image accetta un elenco separato da virgole. Il primo valore è il livello superiore. Gradienti e immagini si mescolano liberamente, e ogni livello può avere la propria dimensione e posizione se elenchi quelle proprietà nello stesso ordine. È la scelta giusta per le immagini decorative che non richiedono testo 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;
}

Le barre in alto e in basso vanno bene per le gallerie in cui un titolo sta in alto e un credito in basso. La vignettatura porta lo sguardo verso l'interno senza reggere testo. La tinta del brand ha un grande effetto per pagine del team e banner di eventi; gli overlay a gradiente spiega quando ognuno funziona dal punto di vista del design.

Metodo 2: uno pseudo-elemento sopra un img

Le immagini di contenuto appartengono a elementi <img>: hanno testo alternativo, srcset responsivo, caricamento differito e scoperta anticipata da parte del browser. Un gradiente di sfondo non può stare sopra un <img>, quindi avvolgilo e metti il gradiente sullo pseudo-elemento del contenitore.

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

Per un'immagine hero che è l'elemento più grande sullo schermo, il secondo metodo di solito vince in velocità di caricamento. Ottimizzare le immagini per il web spiega perché il browser trova gli elementi <img> prima degli sfondi CSS.

Metodo 3: blend mode per i lavaggi di colore

Un overlay semplice sta sulla foto come un vetro colorato. Una blend mode fonde il gradiente con le luci e le ombre della foto stessa, e sembra più che la foto sia stata scattata in quel colore. Usa background-blend-mode per gli sfondi a livelli e mix-blend-mode su uno pseudo-elemento sopra 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 tecnica completa, compreso come scegliere i due colori, è in l'effetto duotone.

Overlay che mantengono il testo leggibile

L'errore più comune è un velo scuro uniforme su tutta la foto, diciamo nero al 50 percento. Spegne l'immagine ovunque e può comunque non essere abbastanza scuro dietro le parole. Dai invece una forma all'overlay: più scuro sotto il testo, trasparente dove la foto conta.

1. 1

   Decidi dove vanno le parole

   In basso a sinistra per le didascalie, nel terzo sinistro per il testo dell'hero, al centro per una sola riga.

2. 2

   Punta il gradiente verso di esse

   Usa to top per il testo in basso, to right per il testo a sinistra, o un radiale centrato sulle parole.

3. 3

   Fermati presto

   Sfuma fino alla trasparenza totale entro il 60-70 percento così gran parte della foto resta intatta.

4. 4

   Controlla il caso peggiore

   Misura il contrasto dove la foto è più luminosa dietro una lettera. Contrasto del colore e accessibilità elenca i rapporti.

Le sfumature morbide con molti punti appaiono più fluide di una dissolvenza a due punti; il metodo è in gradienti trasparenti in CSS.

Overlay senza tentativi

Su un sito web ogni overlay lo regoli a mano. Per post social, banner e slide, Gradiently salta il passaggio: un Mark sa dove sono le tue parole e approfondisce o alleggerisce i propri colori dietro di esse, e le foto possono essere tinte con i colori del Mark in mono, duotone o lavaggio, e con Pro il design si ridimensiona in ogni formato in un solo passaggio, senza overlay da rifare.