Slørede baggrunde: blødt fokus gjort rigtigt

En sløret baggrund tager detaljer væk, så noget andet kan føre an: et ansigt i et portræt, et produkt på et butiksfoto, en overskrift på et opslag, et panel i en grænseflade. Sløring virker, fordi øjet går efter det, der er skarpest. Kunsten er mængden. Lidt sløring ligner et objektiv, meget gør baggrunden til blød farve, og midterzonen ligner som regel et kamera, der ramte ved siden af fokus.

Når en sløret baggrund hjælper

• At adskille et motiv. Portrætter og produktbilleder læses tydeligere, når baggrunden er blød, som med et objektiv på stor blænde.
• At give plads til ord. Tekst over et sløret foto er lettere at læse end tekst over et skarpt, detaljeret et.
• At fylde et format. Et landskabsfoto i en lodret story har brug for noget over og under sig. En sløret, forstørret kopi af samme foto fylder pladsen i matchende farve.
• Grænseflader i lag. Paneler af matteret glas slører det, der ligger bag dem, så panelet læses som et selvstændigt lag, mens det antyder indholdet nedenunder.
• Privatliv i videoopkald. Videoopkaldsapps slører rummet bag dig, så opmærksomheden bliver på dit ansigt.

Foto 1200×900 (4:3)

1200 × 900

Story 1080×1920

1080 × 1920

Hvor meget sløring skal du bruge

Sløringens styrke er relativ til billedets størrelse: den samme radius, der knapt nok blødgør et foto på 4.000 pixel, opløser et på 600 pixel. Bedøm det med øjet i den størrelse, folk kommer til at se det. Til tekstbaggrunde skal du gå så kraftigt til værks, at der ikke er kanter tilbage bag bogstaverne, for halvslørede former konkurrerer stadig med ordene. Tekst over billeder forklarer hvorfor.

Et sløret foto er en gradient i forklædning

Slør et foto kraftigt, og det, der er tilbage, er dets farve, bredt ud i bløde felter: en solnedgang bliver til en overgang fra orange til violet, en skov bliver til dybe grønne toner med en bleg himmel øverst. Derfor er slørede fotos så naturlige baggrunde til de billeder, de stammer fra. Det er også et vink: du kunne bygge den gradient direkte og få samme harmoni, skarpere kontrol og ingen kompressionsartefakter.

For at trække paletten ud af et foto, se farvepalet fra et billede. I Gradiently gør Match et billede det i ét trin: slip et billede, og du får dets palet og de nærmeste Marks eller nye, lavet i dets billede.

Sådan retter du de sædvanlige sløringsproblemer

1. 1

   Forstør for at skjule falmede kanter

   Sløring trækker gennemsigtighed eller mørke pixels ind fra uden for billedet, så kanterne bliver blege eller grå. Skalér den slørede kopi lidt op ud over rammen, så de bløde kanter beskæres væk.

2. 2

   Læg korn på for at stoppe striber

   Et kraftigt sløret billede er en række langsomme, glatte overgange, som får striber, når de gemmes som 8-bit JPEG eller PNG. Et let kornlag skjuler trinene. Se gradientstriber.

3. 3

   Mørkn eller lysn til tekst

   Sløring fjerner detaljer, men ikke lysstyrke. Hvis teksten stadig kæmper, så læg et mørkt eller lyst lag over sløringen, indtil kontrasten holder.

4. 4

   Hold mætningen levende

   Sløring blander farverne sammen til et gennemsnit, og det kan dæmpe dem. Et lille løft i mætningen efter sløringen bringer farven tilbage.

Slørede baggrunde i CSS

På nettet er der to værktøjer. filter: blur() slører et element, hvilket passer til en sløret kopi af et billede bag det rigtige. backdrop-filter: blur() slører det, der ligger bag et element, og det giver paneler af matteret glas. Begge koster tegnetid, og backdrop-filter over rullende indhold koster mest. Se CSS-gradienters ydeevne.

/* a blurred, enlarged copy of the cover image fills the frame */
.cover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cover-image) center / cover;
  filter: blur(40px) saturate(1.2);
  transform: scale(1.15); /* crops the faded edges */
}

/* a frosted glass panel */
.panel {
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

Matterede paneler over farverige baggrunde er grundlaget for glassmorphism, som har sine egne regler for kontrast og kanter.

Alternativer til sløring

Et mørkt lag, et fast panel bag ordene eller en duotone-behandling af fotoet er de andre almindelige valg. Sløring er hurtigst. En designet baggrund er som regel den, du har mest kontrol over.