CSS-liukuväripeite: sävytä ja tummenna kuvat oikein

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 <img>, 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ä.

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

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 käsittelee suunnittelun näkökulmasta sopivia tilanteita.

Menetelmä 2: pseudoelementti img-kuvan päällä

Sisältökuva kuuluu <img>-elementtiin: alt-teksti, mukautuva srcset, laiska lataus ja selaimen varhainen löytö. Taustaliukuväri ei voi peittää <img>-elementtiä. Ympäröi kuva elementillä ja aseta liukuväri sen pseudoelementtiin.

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

Näytön suurimmalle pääkuvalle toinen menetelmä on yleensä latausnopeudeltaan parempi. Verkkokuvien optimointi 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.

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

Koko tekniikka ja kahden värin valinta löytyvät artikkelista duotone-tehoste.

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

   Päätä sanojen paikka

   Kuvateksti vasemmalle alas, pääkuvan teksti vasempaan kolmannekseen, yksi rivi keskelle.

2. 2

   Suuntaa liukuväri sanoihin

   to top alatekstille, to right vasemmalle tai sanoihin keskitetty säteittäinen liukuväri.

3. 3

   Päätä häivytys ajoissa

   Täysin läpinäkyväksi 60-70 %:iin mennessä, jotta suurin osa kuvasta säilyy.

4. 4

   Tarkista pahin kohta

   Mittaa kontrasti kirjaimen takaisesta kirkkaimmasta kohdasta. Värikontrasti ja saavutettavuus listaa suhteet.

Monen pisteen tasoitettu peite näyttää kaksipisteistä pehmeämmältä. Menetelmä löytyy artikkelista läpinäkyvät CSS-liukuvärit.

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