CSS-taustat: värit, liukuvärit ja kuvat kerroksina

CSS-taustat muodostuvat yhden elementin kerroksista. background hyväksyy pilkuilla erotetut kuvat ja liukuvärit, joista ensimmäinen piirretään päälle, sekä yhden värin alimmaiseksi. Näin teet sävytetyn pääkuvan, pehmeän valon liukuvärille tai pintakuvion brändivärille ilman lisäelementtejä. Jäljelle jää lyhenteen arvojen ymmärtäminen.

background-lyhenne arvo kerrallaan

Lyhenne asettaa enintään kahdeksan erillistä ominaisuutta. Pois jätetyt palautuvat oletuksiin, mikä aiheuttaa usein ”Miksi taustan koko katosi?” -virheen.

.hero {
  /* image | position / size | repeat | colour */
  background: url("harbour.webp") center 30% / cover no-repeat #0f172a;
}

Taustakerrosten pinoaminen

Listaa kerrokset ylhäältä alas pilkuilla erotettuna. Jokaisella voi olla oma sijainti, koko ja toisto samassa järjestyksessä erillisissä ominaisuuksissa. Vain viimeinen kerros voi sisältää värin. Ajattele katsovasi kuultopaperipinon läpi.

.section {
  background:
    radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%),
    linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)
    #0f0b1e;
}

Käytä ulommissa väripisteissä transparent-arvoa, jotta valot sulautuvat alla olevaan. Muodoista kertovat CSS:n säteittäinen liukuväri ja CSS-verkkoliukuväri.

Liukuväri taustakuvan päällä

Hyödyllisin kerrostausta sävyttää kuvan niin, että sanat erottuvat. Liukuväri ensin, kuva toiseksi. Tekstin kohdalta tumma ja muualla läpinäkyvä liukuväri säilyttää kuvasta enemmän kuin tasainen tumma peite.

.hero {
  background:
    linear-gradient(90deg, rgb(10 12 24 / 0.85) 0%, rgb(10 12 24 / 0.4) 45%, transparent 70%),
    url("terrace.webp") center / cover no-repeat
    #0a0c18;
  color: #f8fafc;
}

Liukuväripeite tarjoaa lisää reseptejä. Teksti kuvan päällä kertoo, milloin kannattaa siirtää sanoja tummentamisen sijaan.

background-size, sijainti ja toisto

• cover täyttää laatikon ja rajaa yli menevän. Sopii kuviin ja reunasta reunaan ulottuviin pääkuviin.
• contain mahduttaa koko kuvan ja jättää mahdollisesti tyhjää. Sopii logoihin ja kuvituksiin, joita ei saa rajata.
• Yhdistä cover harkittuun background-position-arvoon kuten 50% 30%, jotta kasvot tai tuote pysyvät näkyvissä.
• Pintakuviolle sopii repeat ja kiinteä koko kuten 200px 200px, jotta rae pysyy samana kaikilla näyttöleveyksillä.
• background-attachment: fixed tekee työpöydällä parallaksivaikutelman, mutta moni mobiiliselain sivuuttaa sen. Älä rakenna sen varaan.

.card {
  background:
    url("grain.png") 0 0 / 200px 200px repeat,
    linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%);
}

Myös background-clip: text on hyödyllinen: se leikkaa taustan kirjainten muotoon ja tekee CSS-liukuväritekstin. Käytä suurissa otsikoissa ja aseta tasainen color varalle. CSS-liukuväriteksti näyttää koko mallin.

Vältettävät virheet

Mukautuvat ja nopeat taustakuvat

image-set() antaa selaimen valita muodon tai tarkkuuden kuten img-elementin srcset. Taustakuva löytyy vasta CSS:n jäsennyksessä ja voi siksi saapua myöhään. head-osan esilatausvihje korjaa tämän.

<link rel="preload" as="image" href="/hero-1920.avif" type="image/avif" fetchpriority="high">

<style>
  .hero {
    background: image-set(
      url("/hero-1920.avif") type("image/avif"),
      url("/hero-1920.webp") type("image/webp"),
      url("/hero-1920.jpg") type("image/jpeg")
    ) center / cover no-repeat #0f172a;
  }
</style>

Nopein tausta on usein kokonaan ilman kuvaa. Kerrostetut liukuvärit eivät vaadi latausta, ja pieni raekuva lisää pintaa muutamalla kilotavulla. CSS-liukuvärien suorituskyky ja WebP verrattuna PNG:hen ja JPG:hen käsittelevät valintoja. Jos et halua säätää valoa ja rakeisuutta käsin, Gradientlyn Mark antaa valmiin, omaleimaisen 1920×1080-pääkuvataustan samassa ilmeessä kuin somejulkaisut.