# En baggrund, der tilpasser sig teksten: sådan giver en Mark plads

[Canonical HTML page](https://gradiently.design/da/guide/text-reacts-to-background)

De fleste baggrunde er billeder, og billeder ved ikke, hvor din overskrift står. Det gør en Mark, så den omarrangerer sig selv for at lukke ordene igennem i stedet for at gemme sig bag en boks.

## The short version

- En Mark fra Gradiently er en baggrund, der tilpasser sig teksten, fordi den tegnes live og ved, hvor ordene i designet står.
- Bag dine ord flytter en Mark sit roligste område med bedst kontrast på plads, gør farverne nær bogstaverne dybere eller lysere og dæmper travle detaljer.
- Reaktionen bruger ingen bokse, skygger eller sløring, så baggrunden forbliver hel, og ordene stadig kan læses.
- Du vælger, hvor kraftigt en Mark reagerer, fra Fra over Usynlig, Diskret og Tydelig til Markant, og kan finjustere med Tone, Ro, Bøjning og Rækkevidde.
- Fordi Marken tegnes på ny til hver størrelse, giver den plads igen, uanset hvor ordene lander i hvert format.

En Mark fra Gradiently er en **baggrund, der tilpasser sig teksten**. Fordi den tegnes live i stedet for at være gemt som et billede, ved den, hvor dine ord står, og den omarrangerer sig omkring dem: den roligste del af materialet med bedst kontrast flytter sig bag teksten, farverne nær bogstaverne bliver dybere eller lysere, og travle detaljer falder til ro. Intet lægges ovenpå. Der er ingen bokse, ingen skygger og ingen sløring, så du beholder hele baggrunden, og ordene kan stadig læses.

## De sædvanlige måder at gøre tekst læselig på, og hvad de koster

Sæt en overskrift på en livlig gradient eller et foto, og en del af den forsvinder. Standardløsningerne virker alle ved at dække baggrunden til, hvilket er et underligt resultat, når baggrunden var grunden til, at du valgte designet.

### Baggrunden dækkes til

- En ensfarvet eller frostet boks bag ordene
- En slagskygge på hvert bogstav
- Sløring af området bag teksten
- Et mørkt lag over hele billedet

### En Mark giver plads

- Dens rolige område flytter sig derhen, hvor ordene står
- Farverne nær bogstaverne bliver dybere eller lysere
- Korn, riller og lysskær falder til ro bag teksten
- Resten af baggrunden forbliver lige så klar som før

Hver løsning har sin plads på et fladt billede, og [tekst på en gradientbaggrund](https://gradiently.design/da/guide/text-on-gradient) gennemgår dem ærligt. Forskellen med en Mark er, at baggrunden deltager i stedet for at blive maskeret.

## Hvad en Mark gør omkring dine ord

1. **Den lægger sig til rette** Materialet flytter sig, så dine ord lander på dets roligste del. Lys, der ville have siddet bag overskriften, driver ud i den åbne plads omkring den.
2. **Den skifter tone** Tæt på bogstaverne glider paletten mod en farve, der står i kontrast til teksten: dybere bag lyst blæk, lysere bag mørkt blæk.
3. **Den falder til ro** Vridning, uro og fine detaljer dæmpes bag ordene, så en stærk tekstur aldrig skærer igennem en tynd streg.
4. **Den bøjer om kanterne** Mønstrene krummer en smule ved kanten af ordene i stedet for at løbe lige igennem dem.

En eventplakat for en sen aftenåbning på et museum, hvor gradientens lyseste område sidder bag titlen

Reaktion fra: materialet løber lige igennem ordene, præcis som et fladt billede ville.

Den samme museumsplakat, hvor gradienten har lagt sig i en rolig, dybere tone bag titlen og detaljerne

Reaktion til: den samme Mark lægger et dybere, roligere område bag teksten og beholder sine farver andre steder.

Reaktionen arbejder hånd i hånd med [Automatisk tekstfarve](https://gradiently.design/da/guide/auto-ink-legibility), som vælger Markens lyse eller mørke blæk til hver linje. Baggrunden skaber pladsen; Automatisk tekstfarve vælger den rigtige farve til at fylde den.

## Sådan vælger du, hvor kraftigt baggrunden reagerer

Du bestemmer, hvor meget Marken viger. Panelet til det hedder Omkring dine ord, og det starter med fem niveauer.

| Niveau | Hvad det gør | Godt til |
| --- | --- | --- |
| Fra | Materialet ignorerer dine ord | Baggrundsbilleder og kunsttryk uden tekst |
| Usynlig | Virker kun, hvor det er nødvendigt; ingen vil bemærke det | Store, fede overskrifter på rolige Marks |
| Diskret | Balanceret: looket bevares, ordene kan læses | De fleste opslag og stories |
| Tydelig | Ordene vinder altid | Menukort, prislister, eventdetaljer |
| Markant | Den mest kontrast, det giver, roligt lidt bredere | Lille tekst, lang tekst, skilte, der læses fra den anden ende af et rum |

Fem udgangspunkter. Diskret er et fornuftigt standardvalg; gå op, når ordene bliver mindre eller længere.

Under niveauerne er der fire drejeknapper til finjustering: **Tone** bestemmer, hvor meget materialet lægger sig bag ordene for kontrast, **Ro** hvor meget vridning og uro dæmpes, **Bøjning** hvor meget mønsteret krummer ved kanten af ordene, og **Rækkevidde** om det slutter tæt om hvert bogstav eller reagerer omkring hele tekstblokken.

> **Rækkevidde er den knap, de fleste har brug for** Til en kort overskrift holder en stram rækkevidde baggrunden livlig helt op til bogstaverne. Til et afsnit eller en liste gør en bredere rækkevidde ét tydeligt område roligt for hele blokken, hvilket er lettere at læse.

## Hvorfor det betyder noget i alle størrelser

Et fladt baggrundsbillede bliver sat op én gang. Beskær det til en story, og det lyse punkt kan lande lige bag overskriften. En Mark tegnes på ny til hvert format, så når et design flytter fra et opslag til en story til et banner, flytter ordene også med, og Marken giver plads igen, uanset hvor de lander. Det er det, der får [ét look til at virke i alle størrelser](https://gradiently.design/da/guide/one-look-every-size).

- Opslag 1080×1350: 1080 × 1350
- Story 1080×1920: 1080 × 1920
- X-header 1500×500: 1500 × 500
- YouTube-thumbnail 1280×720: 1280 × 720

Fire former, fire forskellige steder til overskriften. Det rolige område følger ordene i hver af dem.

## En enkel version af idéen i CSS

På nettet kan du låne princippet med en almindelig gradient: læg den dybeste, roligste del af baggrunden der, hvor din tekst står, og hold farven ude ved kanterne. Den følger ikke ordene, når layoutet ændrer sig, men den slår en boks.

Roligt, dybt område placeret bag teksten: `radial-gradient(ellipse 70% 45% at 35% 62%, #1b1030 0%, #2e1745 40%, #8a3f6e 75%, #f0a46f 100%)`

Tekstblokken sidder i den mørke blommefarvede ellipse lavt til venstre; fersken og rosa forbliver klare ud mod kanterne.

```css
.hero {
  min-height: 70vh;
  display: grid;
  align-content: end;
  padding: 8vh 6vw;
  color: #fbf3ea;
  background: radial-gradient(
    ellipse 70% 45% at 35% 62%,
    #1b1030 0%,
    #2e1745 40%,
    #8a3f6e 75%,
    #f0a46f 100%
  );
}
```

Flyt ellipsens position derhen, hvor din overskrift står. [Gradientoverlay i CSS](https://gradiently.design/da/guide/css-gradient-overlay) viser det samme trick oven på et foto.

## Hvornår du skal skrue ned for reaktionen

Ikke alle designs ønsker maksimal læsbarhed. Et baggrundsbillede til telefonen har slet ingen ord, så Fra er det rigtige. Kæmpestore displaybogstaver, et enkelt ord hen over en plakat, kan stå for sig selv og ser ofte bedre ud med Usynlig. Bogstavbehandlinger som Kontur eller Dybde, som gennemgås i [bogstaveffekter](https://gradiently.design/da/guide/lettering-treatments), har allerede deres egen kontrast. Gem de kraftige niveauer til de opgaver, der kræver dem: småt tryk, lange detaljer og alt, der læses i en fart.

## FAQ

### Hvordan tilpasser en Mark fra Gradiently sig teksten?

Den flytter sit roligste område med bedst kontrast bag dine ord, gør farverne nær bogstaverne dybere eller lysere og dæmper travle detaljer, alt sammen uden bokse, skygger eller sløring.

### Kan jeg få baggrunden til at holde op med at reagere på min tekst?

Ja. Sæt reaktionen til Fra, så ignorerer materialet dine ord, hvilket passer til baggrundsbilleder og designs uden tekst.

### Hvilket reaktionsniveau skal jeg bruge?

Diskret passer til de fleste opslag og stories. Brug Tydelig eller Markant til lille tekst, lang tekst, menukort og alt, der læses på afstand.

### Virker reaktionen, når jeg ændrer størrelsen på et design?

Ja. En Mark tegnes på ny til hver størrelse, så den giver plads igen, uanset hvor ordene lander i det nye format.