Tausta - CSS-temppuja | CSS-almanakka 2025

backgroundOmaisuus CSS voit hallita taustan minkään elementin (mitä maalit alla sisältöä että elementti). Se on lyhytominaisuus, mikä tarkoittaa, että sen avulla voit kirjoittaa useita CSS-ominaisuuksia yhdessä. Kuten tämä:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background koostuu kahdeksasta muusta kiinteistöstä:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Voit käyttää mitä tahansa näiden ominaisuuksien yhdistelmää, mistä pidät, melkein missä tahansa järjestyksessä (vaikka spesifikaatiossa suositeltu järjestys on yllä). Siellä on kuitenkin gotcha: kaikki, mitä et määritä backgroundomaisuudessa, asetetaan automaattisesti oletusasetukseksi. Joten jos teet jotain tällaista:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Tausta on läpinäkyvä punaisen sijaan. Korjaus on kuitenkin helppoa: määritä vain background-colorsen jälkeen backgroundtai käytä vain lyhennettä (esim. background: url(… ) red;)

Useita taustoja

CSS3 lisäsi tukea useille taustoille, jotka kerrostuvat toistensa päälle. Mikä tahansa taustatietoihin liittyvä ominaisuus voi ottaa pilkulla erotetun luettelon, kuten tämä:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Jokainen pilkuilla erotetun luettelon arvo vastaa kerrosta: ensimmäinen arvo on ylin kerros, toinen arvo on toinen kerros ja taustaväri on aina viimeinen kerros.

Reseptit

Katso Timothy Millerin (@tjacobdesign) kynä emBzRd CodePenistä.

Selaimen tuki

Tuki vaihtelee eri ominaisuuksien mukaan, ja jokaisessa Almanacin vastaavassa artikkelissa on ainutlaatuiset selaintukitiedot. Yksiväriset perustaustat ja yksittäiset kuvat toimivat kuitenkin kaikkialla, ja kaikki, mitä ei tueta, palaa seuraavaksi parhaana, olipa kyseessä kuva tai väri.