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

[Canonical HTML page](https://gradiently.design/da/guide/css-gradient-overlay)

At lægge en gradient over et foto tager én ekstra linje CSS. Valget mellem tre metoder afgør, om billedet indlæses hurtigt, om overlayet kan animeres, og om ordene ovenpå kan læses.

## The short version

- Det hurtigste gradient-overlay i CSS er et andet baggrundslag: list gradienten før url() i background-image, så den sidder øverst.
- Til et img-element lægger du gradienten på et ::before- eller ::after-pseudoelement på en positioneret omslutning.
- background-blend-mode og mix-blend-mode gør et gradient-overlay til en farvetone, der toner billedet frem for at dække det.
- Hero-billeder sat som CSS-baggrunde opdages senere end img-elementer, så et img med overlay indlæses som regel hurtigere over folden.
- Overlays, der skal bære tekst, bør være mørkest bag ordene og gennemsigtige andre steder, ikke en jævn mørk film over hele fotoet.

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.

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

Et mørkt panel til venstre til tekst, der klarer op ved 70 procent, så højre side af fotoet forbliver lys. Reservefarven matcher overlayet, så teksten kan læses, selv før billedet er kommet.

- Sidepanel til tekst: `linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%)`
- Bjælker øverst og nederst: `linear-gradient(to bottom, rgb(2 6 23 / 0.6) 0%, rgb(2 6 23 / 0) 25%, rgb(2 6 23 / 0) 65%, rgb(2 6 23 / 0.75) 100%)`
- Blød vignet: `radial-gradient(ellipse at center, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.55) 100%)`
- Diagonal brandtone: `linear-gradient(135deg, rgb(109 40 217 / 0.85) 0%, rgb(236 72 153 / 0.55) 100%)`

Fire overlay-forvalg, vist her over siden. Læg en hvilken som helst af dem foran `url()` i din egen `background-image`.

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](https://gradiently.design/da/guide/gradient-overlay) 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.

```html
<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>
```

Et rigtigt billedelement med rigtig alt-tekst. Billedteksten kommer til at sidde på overlayet.

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

`isolation: isolate` holder overlayets stabling inde i figuren. Overlayet kan tone ud ved hover, fordi det er sit eget lag.

### Baggrundslag

- Ét element, én deklaration
- Ingen alt-tekst, så kun dekorative billeder
- Findes sent af browseren, hvilket kan gøre et hero langsomt
- Overlayet kan ikke tone ud uden at animere hele baggrunden

### img plus pseudoelement

- En omslutning og nogle linjer mere
- Ordentlig alt-tekst og responsiv `srcset`
- Opdages tidligt. `fetchpriority="high"` hjælper hovedbilledet
- Overlayets opacitet kan have overgang billigt

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](https://gradiently.design/da/guide/lighthouse-image-performance) 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>`.

| Blandingstilstand | Hvad den gør | Godt overlay til |
| --- | --- | --- |
| `multiply` | Gør mørkere. Hvide områder får gradientens farve | Rige, stemningsfulde toner på lyse fotos |
| `screen` | Gør lysere. Sorte områder får farven | Luftige, falmede udtryk på mørke fotos |
| `overlay` | Øger kontrasten og skubber farve ind i mellemtonerne | Slagkraftig brandfarve på portrætter |
| `color` | Beholder fotoets lys, erstatter dets farve | Duotone-agtige farvetoner fra en gradient med to farver |
| `soft-light` | En blid udgave af overlay | Subtil varme eller kølighed |

De fem tilstande, der er værd at kende. `color` med en gradient i to farver er den hurtigste duotone til nettet.

```css
/* 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;
}
```

`background-blend-mode` blander lagene i ét element. `mix-blend-mode` blander et element med det, der er bag det, her fotoet.

Den fulde teknik, herunder hvordan du vælger de to farver, står i [duotone-effekten](https://gradiently.design/da/guide/duotone-effect).

## 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. **Beslut, hvor ordene skal stå** Nederst til venstre til billedtekster, venstre tredjedel til hero-tekst, midten til en enkelt linje.
2. **Peg gradienten mod dem** Brug `to top` til tekst nederst, `to right` til tekst til venstre eller en radial centreret på ordene.
3. **Stop tidligt** Tone ud til helt gennemsigtig ved 60 til 70 procent, så det meste af fotoet forbliver urørt.
4. **Tjek det værste tilfælde** Mål kontrasten, hvor fotoet er lysest bag et bogstav. [Farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) 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](https://gradiently.design/da/guide/css-gradient-transparent).

## 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.

Et bredt eventbanner til Harbour Days med en gradientbaggrund, der bliver dybere bag titlen

Et eventbanner i hero-størrelse til hjemmesider, hvor baggrunden beroliger sig bag ordene i stedet for et overlay, der er finjusteret i hånden.

## FAQ

### Hvordan lægger jeg en gradient over et baggrundsbillede i CSS?

List gradienten før billedet i `background-image`: `linear-gradient(`rgb(0 0 0 / 0,5)`, transparent), url(photo.jpg)`. Det første lag tegnes øverst.

### Hvordan tilføjer jeg et gradient-overlay til et img-element?

Omslut billedet i et positioneret element, og læg gradienten på dets `::after`-pseudoelement med `position: absolute` og `inset: 0`.

### Hvad er forskellen på background-blend-mode og mix-blend-mode?

`background-blend-mode` blander baggrundslagene i ét element. `mix-blend-mode` blander et helt element med det, der er bag det.

### Hvor mørkt skal et billedoverlay være til tekst?

Mørkt nok til, at teksten består kontrasttjek på det lyseste punkt bag den. Form gradienten, så den er mørkest dér og klar andre steder.

### Kan jeg animere et gradient-overlay ved hover?

Ja. Læg overlayet på et pseudoelement, og lav overgang på dets `opacity`, som er billigere end at animere selve baggrunden.