# CSS-liukuväripeite: sävytä ja tummenna kuvat oikein
[Canonical HTML page](https://gradiently.design/fi/guide/css-gradient-overlay)
Liukuväri kuvan päälle tarvitsee yhden CSS-lisärivin. Kolmen menetelmän valinta ratkaisee kuvan latausnopeuden, peitteen animoinnin ja tekstin luettavuuden.
## The short version
- Nopein CSS-liukuväripeite on toinen taustakerros: listaa liukuväri ennen url()-arvoa background-imagessa, niin se on päällä.
- img-elementille liukuväri asetetaan sijoitetun ympäröivän elementin ::before- tai ::after-pseudoelementtiin.
- background-blend-mode ja mix-blend-mode muuttavat peitteen kuvaa sävyttäväksi värilaveeraukseksi peittämisen sijaan.
- CSS-pääkuvatausta löytyy img-elementtiä myöhemmin, joten img ja peite latautuvat yleensä nopeammin ensimmäiseen näkymään.
- Tekstin peite on tummin sanojen takana ja muualla läpinäkyvä, ei tasainen tumma kalvo koko kuvalla.
Yksinkertaisin **CSS-liukuväripeite** on kerrostausta: `background-image: `linear-gradient(`rgb(2 6 23 / 0.6)`, rgb(2 6 23 / 0))`, url(photo.jpg)`. Ensimmäinen kerros piirretään päälle, joten liukuväri peittää kuvaa. Jos kuva on ``, käytä pseudoelementtiä. Kun haluat sävyttää peittämisen sijaan, lisää sekoitustila. Jokainen tapa sopii omaan tehtäväänsä.
## Menetelmä 1: kerrostettu tausta
`background-image` hyväksyy pilkuilla erotetun listan, ensimmäinen arvo päällimmäisenä. Kuvat ja liukuvärit sekoittuvat vapaasti. Jokaisella voi olla oma koko ja paikka, kun listaat ne samassa järjestyksessä. Tämä sopii koristekuviin, jotka eivät tarvitse alt-tekstiä.
```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;
}
```
Tumma vasen alue tekstille häipyy 70 %:iin mennessä ja jättää oikean kirkkaaksi. Peitteeseen sopiva varaväri pitää tekstin näkyvänä ennen kuvan latausta.
- Sivupaneeli tekstille: `linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%)`
- Ylä- ja alakaistat: `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%)`
- Pehmeä vinjetti: `radial-gradient(ellipse at center, rgb(0 0 0 / 0) 50%, rgb(0 0 0 / 0.55) 100%)`
- Vino brändisävytys: `linear-gradient(135deg, rgb(109 40 217 / 0.85) 0%, rgb(236 72 153 / 0.55) 100%)`
Neljä peitevalintaa sivun päällä. Lisää mikä tahansa oman background-imagen url()-arvon eteen.
Ylä- ja alakaistat sopivat galleriaan, jonka otsikko on yllä ja kuvalähde alla. Vinjetti ohjaa katsetta sisään ilman tekstiä. Brändisävytys sopii tiimisivuille ja tapahtumabannereihin. [Liukuväripeitteet](https://gradiently.design/fi/guide/gradient-overlay) käsittelee suunnittelun näkökulmasta sopivia tilanteita.
## Menetelmä 2: pseudoelementti img-kuvan päällä
Sisältökuva kuuluu ``-elementtiin: alt-teksti, mukautuva `srcset`, laiska lataus ja selaimen varhainen löytö. Taustaliukuväri ei voi peittää ``-elementtiä. Ympäröi kuva elementillä ja aseta liukuväri sen pseudoelementtiin.
```html
Harbour Days, 14 to 16 June
```
Oikea kuvaelementti alt-tekstillä. Kuvateksti asettuu peitteelle.
```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 pitää peitteen pinon figuren sisällä. Erillinen kerros voidaan häivyttää osoittimen alla.
### Taustakerros
- Yksi elementti ja määrittely
- Ei alt-tekstiä, vain koristekuville
- Selain löytää myöhään, mikä voi hidastaa pääkuvaa
- Peite ei häivy animoimatta koko taustaa
### img ja pseudoelementti
- Ympäröivä elementti ja muutama lisärivi
- Kunnollinen alt-teksti ja mukautuva srcset
- Varhainen löytö; fetchpriority="high" auttaa pääkuvaa
- Peitteen opacity-siirtymä on kevyt
Näytön suurimmalle pääkuvalle toinen menetelmä on yleensä latausnopeudeltaan parempi. [Verkkokuvien optimointi](https://gradiently.design/fi/guide/lighthouse-image-performance) kertoo, miksi selain löytää img-elementit ennen CSS-taustoja.
## Menetelmä 3: värilaveerauksen sekoitustilat
Tavallinen peite asettuu kuvalle kuin värillinen lasi. Sekoitustila yhdistää liukuvärin kuvan valoon ja varjoon kuin kuva olisi kuvattu siinä värissä. Käytä kerrostaustassa `background-blend-mode`-arvoa ja img-kuvan pseudoelementissä `mix-blend-mode`-arvoa.
| Sekoitustila | Vaikutus | Sopiva käyttökohde |
| --- | --- | --- |
| `multiply` | Tummentaa, valkoiset alueet saavat liukuvärin värin | Syvät tunnelmalliset sävytykset vaaleissa kuvissa |
| `screen` | Vaalentaa, mustat alueet saavat värin | Ilmavat, haalistuneet tummat kuvat |
| `overlay` | Lisää kontrastia ja väriä keskisävyihin | Vahva brändiväri muotokuvissa |
| `color` | Säilyttää valon, korvaa värin | Kahden värin liukuvärin duotone-laveeraus |
| `soft-light` | Lempeä overlay-versio | Hienovarainen lämpö tai viileys |
Viisi hyödyllistä tilaa. color ja kaksivärinen liukuväri tekevät nopeimman verkkoduotonen.
```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 sekoittaa yhden elementin taustakerrokset. mix-blend-mode sekoittaa elementin sen takana olevaan kuvaan.
Koko tekniikka ja kahden värin valinta löytyvät artikkelista [duotone-tehoste](https://gradiently.design/fi/guide/duotone-effect).
## Tekstin luettavana pitävät peitteet
Tavallisin virhe on tasainen tumma kalvo, esimerkiksi 50-prosenttinen musta, koko kuvalla. Se latistaa kuvan eikä silti ehkä riitä tekstin takana. Muotoile peite: tummin sanojen alla, läpinäkyvä tärkeissä kuvakohdissa.
1. **Päätä sanojen paikka** Kuvateksti vasemmalle alas, pääkuvan teksti vasempaan kolmannekseen, yksi rivi keskelle.
2. **Suuntaa liukuväri sanoihin** `to top` alatekstille, `to right` vasemmalle tai sanoihin keskitetty säteittäinen liukuväri.
3. **Päätä häivytys ajoissa** Täysin läpinäkyväksi 60-70 %:iin mennessä, jotta suurin osa kuvasta säilyy.
4. **Tarkista pahin kohta** Mittaa kontrasti kirjaimen takaisesta kirkkaimmasta kohdasta. [Värikontrasti ja saavutettavuus](https://gradiently.design/fi/guide/color-contrast-accessibility) listaa suhteet.
Monen pisteen tasoitettu peite näyttää kaksipisteistä pehmeämmältä. Menetelmä löytyy artikkelista [läpinäkyvät CSS-liukuvärit](https://gradiently.design/fi/guide/css-gradient-transparent).
## Peitteet ilman arvailua
Verkkosivulla säädät peitteet käsin. Somessa, bannereissa ja dioissa Gradiently ohittaa vaiheen: Mark tietää sanojen paikat ja syventää tai vaalentaa värejään niiden takana. Kuvat sävytetään Markin väreillä monona, duotonena tai laveerauksena. Pro muuttaa kaikki koot yhdellä kertaa ilman uudelleen säädettävää peitettä.
Leveä Harbour Days -tapahtumabanneri, jonka liukuväri syvenee otsikon takana
Tapahtumabanneri verkkosivun pääkuvakoossa. Tausta rauhoittuu sanojen takana käsin säädetyn peitteen sijaan.
## FAQ
### Miten asetan liukuvärin CSS-taustakuvan päälle?
Listaa liukuväri ennen kuvaa background-imagessa: `linear-gradient(`rgb(0 0 0 / 0,5)`, transparent), url(photo.jpg)`. Ensimmäinen kerros piirretään päälle.
### Miten lisään liukuväripeitteen img-elementtiin?
Ympäröi kuva sijoitetulla elementillä ja aseta liukuväri sen ::after-pseudoelementtiin arvoilla position: absolute ja inset: 0.
### Mitä eroa background-blend-modella ja mix-blend-modella on?
background-blend-mode sekoittaa saman elementin taustakerrokset. mix-blend-mode sekoittaa koko elementin sen taustaan.
### Kuinka tumma kuvan peite pitää olla tekstille?
Niin tumma, että teksti läpäisee kontrastitarkistuksen kirkkaimmassa taustakohdassa. Muotoile liukuväri tummaksi siellä ja läpinäkyväksi muualla.
### Voinko animoida liukuväripeitteen osoittimen alla?
Kyllä. Aseta peite pseudoelementtiin ja animoi opacity-arvoa. Se on kevyempää kuin taustan animointi.
