Gradient-overlay i CSS: tone og gør billeder mørkere rigtigt

Det enkleste gradient-overlay i CSS er en lagdelt baggrund: background-image: linear-gradient(rgb(2 6 23 / 0.6), rgb(2 6 23 / 0)), url(photo.jpg). Lag, der er listet først, tegnes øverst, så gradienten sidder over fotoet. Når billedet er et <img>-element, lægger du i stedet gradienten på et pseudoelement, og vil du have farven til at tone fotoet frem for at dække det, tilføjer du en blandingstilstand. Hver metode passer til et andet job.

Metode 1: en lagdelt baggrund

background-image tager imod en kommasepareret liste. Den første værdi er det øverste lag. Gradienter og billeder kan blandes frit, og hvert lag kan have sin egen størrelse og position, hvis du lister de egenskaber i samme rækkefølge. Det er det rette valg til dekorative billeder, hvor der ikke er brug for alt-tekst.

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

Bjælkerne øverst og nederst passer til gallerier, hvor en titel sidder øverst og en kreditering nederst. Vignetten trækker øjet indad uden at bære tekst. Brandtonen er et stærkt udtryk til teamsider og eventbannere. Gradient-overlays dækker, hvornår hver føles rigtig ud fra et designsynspunkt.

Metode 2: et pseudoelement over et img

Indholdsbilleder hører hjemme i <img>-elementer: de får alt-tekst, responsiv srcset, lazy loading og tidlig opdagelse af browseren. En baggrundsgradient kan ikke sidde over et <img>, så omslut det, og læg gradienten på omslutningens 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; }

Til et hero-billede, der er det største på skærmen, vinder den anden metode som regel på indlæsningshastighed. Optimering af billeder til nettet forklarer, hvorfor browseren finder <img>-elementer hurtigere end CSS-baggrunde.

Metode 3: blandingstilstande til farvetoner

Et almindeligt overlay sidder på fotoet som farvet glas. En blandingstilstand blander gradienten ind i fotoets eget lys og mørke, som ligner mere, at fotoet er taget i den farve. Brug background-blend-mode til lagdelte baggrunde og mix-blend-mode på et pseudoelement over et <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;
}

Den fulde teknik, herunder hvordan du vælger de to farver, står i duotone-effekten.

Overlays, der holder teksten læselig

Den almindeligste fejl er en jævn mørk film over hele fotoet, for eksempel 50 procent sort. Den dæmper billedet overalt og er stadig måske ikke mørk nok bag ordene. Form i stedet overlayet: mørkest under teksten, klart, hvor fotoet betyder noget.

1. 1

   Beslut, hvor ordene skal stå

   Nederst til venstre til billedtekster, venstre tredjedel til hero-tekst, midten til en enkelt linje.

2. 2

   Peg gradienten mod dem

   Brug to top til tekst nederst, to right til tekst til venstre eller en radial centreret på ordene.

3. 3

   Stop tidligt

   Tone ud til helt gennemsigtig ved 60 til 70 procent, så det meste af fotoet forbliver urørt.

4. 4

   Tjek det værste tilfælde

   Mål kontrasten, hvor fotoet er lysest bag et bogstav. Farvekontrast og tilgængelighed lister forholdene.

Afdæmpede skærme med mange stop ser blødere ud end en udtoning med to stop. Metoden står i gennemsigtige gradienter i CSS.

Overlays uden gætværk

På et website finjusterer du hvert overlay i hånden. Til opslag på sociale medier, bannere og slides springer Gradiently trinnet over: en Mark ved, hvor dine ord er, og gør sine egne farver dybere eller lysere bag dem, og fotos kan tones i Markens farver som mono, duotone eller en farvetone. Med Pro skifter designet størrelse til alle formater i ét trin, uden noget overlay at lave om.