CSS-verloopoverlay: afbeeldingen goed tinten en verdonkeren

De eenvoudigste CSS-verloopoverlay is een gelaagde achtergrond: background-image: linear-gradient(rgb(2 6 23 / 0.6), rgb(2 6 23 / 0)), url(photo.jpg). Lagen die eerst staan worden bovenop getekend, dus het verloop ligt over de foto. Is de afbeelding een <img>-element, zet het verloop dan op een pseudo-element, en wil je dat de kleur de foto tint in plaats van bedekt, voeg dan een blendmodus toe. Elke methode past bij een andere klus.

Methode 1: een gelaagde achtergrond

background-image accepteert een lijst gescheiden door komma’s. De eerste waarde is de bovenste laag. Verlopen en afbeeldingen mengen vrij, en elke laag kan een eigen grootte en positie hebben als je die eigenschappen in dezelfde volgorde noemt. Dit is de juiste keuze voor decoratieve afbeeldingen waarbij geen alt-tekst nodig is.

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

De balken boven en onder passen bij galerijen waar een titel bovenaan en een bronvermelding onderaan staat. De vignettering trekt het oog naar binnen zonder tekst te dragen. De merktint is een sterke look voor teampagina’s en evenementbanners; verloopoverlays behandelt wanneer elk goed voelt vanuit ontwerp.

Methode 2: een pseudo-element over een img

Inhoudsafbeeldingen horen in <img>-elementen: ze krijgen alt-tekst, responsieve srcset, lazy loading en vroege ontdekking door de browser. Een achtergrondverloop kan niet over een <img> liggen, dus wikkel het in en zet het verloop op het pseudo-element van de wrapper.

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

Voor een hero-afbeelding die het grootste element op het scherm is, wint de tweede methode meestal op laadsnelheid. Afbeeldingen optimaliseren voor het web legt uit waarom de browser <img>-elementen eerder vindt dan CSS-achtergronden.

Methode 3: blendmodi voor kleurwassingen

Een gewone overlay ligt op de foto als getint glas. Een blendmodus mengt het verloop in het eigen licht en donker van de foto, wat meer lijkt alsof de foto in die kleur is genomen. Gebruik background-blend-mode voor gelaagde achtergronden en mix-blend-mode op een pseudo-element over een <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;
}

De volledige techniek, inclusief hoe je de twee kleuren kiest, staat in het duotone-effect.

Overlays die tekst leesbaar houden

De meest gemaakte fout is een gelijkmatige donkere laag over de hele foto, zeg 50 procent zwart. Die maakt het beeld overal dof en is achter de woorden toch misschien niet donker genoeg. Vorm de overlay liever: het donkerst onder de tekst, helder waar de foto ertoe doet.

1. 1

   Bepaal waar de woorden komen

   Linksonder voor bijschriften, het linker derde voor hero-tekst, het midden voor één regel.

2. 2

   Richt het verloop erop

   Gebruik to top voor tekst onderaan, to right voor tekst links, of een radiaal verloop gecentreerd op de woorden.

3. 3

   Stop vroeg

   Laat het verloop bij 60 tot 70 procent volledig transparant worden zodat het grootste deel van de foto onaangeroerd blijft.

4. 4

   Controleer het slechtste geval

   Meet het contrast waar de foto achter een letter het helderst is. Kleurcontrast en toegankelijkheid noemt de verhoudingen.

Verzachte scrims met veel stops zien er gladder uit dan een fade met twee stops; de methode staat in transparante verlopen in CSS.

Overlays zonder gokwerk

Op een website stem je elke overlay met de hand af. Voor socialposts, banners en dia’s slaat Gradiently die stap over: een Mark weet waar je woorden staan en verdiept of verlicht zijn eigen kleuren erachter, foto’s kunnen worden getint in de kleuren van de Mark als mono, duotone of wassing, en met Pro past het ontwerp zich in één stap aan op elk formaat, zonder overlay om opnieuw te maken.