Gradientoverlegg i CSS: ton og mørkne bilder riktig

Det enkleste gradientoverlegget i CSS er en lagdelt bakgrunn: background-image: linear-gradient(rgb(2 6 23 / 0.6), rgb(2 6 23 / 0)), url(photo.jpg). Lag som står først, tegnes øverst, så gradienten ligger over bildet. Når bildet er et <img>-element, legger du gradienten på et pseudoelement i stedet. Når du vil tone bildet fremfor å dekke det, legger du til en blandingsmodus. Hver metode passer sin oppgave.

Metode 1: lagdelt bakgrunn

background-image tar en kommaseparert liste. Første verdi er øverste lag. Gradienter og bilder kan blandes fritt, og hvert lag kan ha egen størrelse og posisjon hvis egenskapene listes i samme rekkefølge. Dette er riktig valg for dekorative bilder som ikke trenger alternativtekst.

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

Feltene øverst og nederst passer gallerier med tittel øverst og kreditering nederst. Vignetten trekker blikket innover uten å bære tekst. Merkevaretoningen gir et tydelig uttrykk til teamsider og arrangementsbannere. Gradientoverlegg viser når hver variant passer fra et designperspektiv.

Metode 2: pseudoelement over img

Innholdsbilder hører hjemme i <img>-elementer: de får alternativtekst, responsiv srcset, utsatt lasting og tidlig oppdagelse av nettleseren. En bakgrunnsgradient kan ikke ligge over en <img>, så legg bildet i en beholder og gradienten på beholderens 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; }

For et toppbilde som er det største på skjermen, vinner vanligvis den andre metoden på lastehastighet. Optimalisering av nettbilder forklarer hvorfor nettleseren finner <img>-elementer før CSS-bakgrunner.

Metode 3: blandingsmoduser for fargetoning

Et vanlig overlegg ligger på bildet som tonet glass. En blandingsmodus blander gradienten inn i bildets eget lys og mørke, så det ser mer ut som bildet ble tatt i den fargen. Bruk background-blend-mode til lagdelte bakgrunner og mix-blend-mode på et pseudoelement over 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;
}

Hele teknikken, inkludert valg av de to fargene, finnes i duotoneeffekten.

Overlegg som holder tekst lesbar

Den vanligste feilen er en jevn mørk hinne over hele bildet, for eksempel 50 prosent svart. Den demper bildet overalt og er kanskje fortsatt ikke mørk nok bak ordene. Form heller overlegget: mørkest under teksten, klart der bildet er viktig.

1. 1

   Bestem hvor ordene skal stå

   Nederst til venstre for bildetekster, venstre tredel for toppfelttekst, midten for én linje.

2. 2

   Rett gradienten mot dem

   Bruk to top for tekst nederst, to right for tekst til venstre, eller en radialgradient sentrert på ordene.

3. 3

   Stopp tidlig

   Ton ut til helt gjennomsiktig ved 60 til 70 prosent, så det meste av bildet forblir urørt.

4. 4

   Kontroller det vanskeligste tilfellet

   Mål kontrast der bildet er lysest bak en bokstav. Fargekontrast og tilgjengelighet lister forholdene.

Mykt formede overlegg med mange stopp ser jevnere ut enn en uttoning med to stopp. Metoden finnes i gjennomsiktige gradienter i CSS.

Overlegg uten gjetting

På en nettside tilpasser du hvert overlegg for hånd. Til sosiale innlegg, bannere og lysbilder hopper Gradiently over dette steget: en Mark vet hvor ordene dine er og gjør egne farger dypere eller lysere bak dem. Bilder kan tones i Markens farger som mono, duotone eller lavering. Med Pro endres designet til alle formater i ett steg, uten noe overlegg å bearbeide.