Gradientöverlägg i CSS: tona och mörkna bilder på rätt sätt

Det enklaste gradientöverlägget i CSS är en bakgrund i lager: background-image: linear-gradient(rgb(2 6 23 / 0.6), rgb(2 6 23 / 0)), url(photo.jpg). Lager som listas först ritas överst, så gradienten ligger över fotot. När bilden är ett <img>-element lägger du i stället gradienten på ett pseudoelement, och när du vill att färgen ska tona fotot snarare än täcka det lägger du till ett blandningsläge. Varje metod passar ett eget jobb.

Metod 1: en bakgrund i lager

background-image accepterar en kommaseparerad lista. Det första värdet är det översta lagret. Gradienter och bilder blandas fritt, och varje lager kan ha egen storlek och position om du listar de egenskaperna i samma ordning. Det här är rätt val för dekorativa bilder där ingen alt-text behövs.

.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 övre och nedre fälten passar gallerier där en titel sitter överst och en bildkredit nederst. Vinjetten drar blicken inåt utan att bära text. Varumärkesgradienten är en kraftfull look för teamsidor och eventbanners; gradientöverlägg tar upp när var och en känns rätt ur ett designperspektiv.

Metod 2: ett pseudoelement över en img

Innehållsbilder hör hemma i <img>-element: de får alt-text, responsiv srcset, lat laddning och tidig upptäckt av webbläsaren. En bakgrundsgradient kan inte ligga över en <img>, så linda in den och lägg gradienten på omslagets pseudoelement.

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

För en herobild som är det största på skärmen vinner den andra metoden oftast på laddningshastighet. Optimera bilder för webben förklarar varför webbläsaren hittar <img>-element tidigare än CSS-bakgrunder.

Metod 3: blandningslägen för färgtoning

Ett vanligt överlägg ligger på fotot som tonat glas. Ett blandningsläge blandar in gradienten i fotots egna ljusa och mörka partier, vilket ser mer ut som om fotot tagits i den färgen. Använd background-blend-mode för bakgrunder i lager och mix-blend-mode på ett pseudoelement över en <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;
}

Hela tekniken, inklusive hur du väljer de två färgerna, finns i duotoneffekten.

Överlägg som håller texten läsbar

Det vanligaste misstaget är en jämn mörk hinna över hela fotot, säg 50 procent svart. Den dämpar bilden överallt och är ändå kanske inte mörk nog bakom orden. Forma överlägget i stället: mörkast under texten, klart där fotot betyder något.

1. 1

   Bestäm var orden hamnar

   Nere till vänster för bildtexter, vänstra tredjedelen för herotext, mitten för en enda rad.

2. 2

   Rikta gradienten mot dem

   Använd to top för text nederst, to right för text till vänster eller en radiell centrerad på orden.

3. 3

   Sluta tidigt

   Tona till helt genomskinligt vid 60 till 70 procent så att det mesta av fotot förblir orört.

4. 4

   Kontrollera värsta fallet

   Mät kontrasten där fotot är ljusast bakom en bokstav. Färgkontrast och tillgänglighet listar förhållandena.

Utjämnade gradienter med många stopp ser mjukare ut än en uttoning med två stopp; metoden finns i transparenta gradienter i CSS.

Överlägg utan gissningar

På en webbplats finjusterar du varje överlägg för hand. För sociala inlägg, banners och slides hoppar Gradiently över steget: en Mark vet var dina ord finns och fördjupar eller lyfter sina egna färger bakom dem, foton kan tonas i Markens färger som mono, duoton eller en gradient, och med Pro ändrar designen storlek till alla format i ett steg, utan något överlägg att göra om.