Ozadje - CSS-triki | Almanah CSS 2025

backgroundHotel v CSS vam omogoča nadzor ozadje vseh elementov (kaj barve pod vsebino v tem elementu). Je stenografska lastnost, kar pomeni, da vam omogoča, da v eno zapišete, kaj bi bilo več lastnosti CSS. Všečkaj to:

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 je sestavljen iz osmih drugih lastnosti:

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

Uporabite lahko katero koli kombinacijo teh lastnosti, ki vam je všeč, v skoraj katerem koli vrstnem redu (čeprav je vrstni red, priporočen v specifikaciji, zgoraj). Obstaja pa še nekaj: vse, česar v backgroundlastnosti ne navedete, se samodejno nastavi na privzeto. Torej, če naredite kaj takega:

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

Ozadje bo prozorno, namesto rdeče. Popravek je enostaven: preprosto določite background-colorpo backgroundali uporabite samo okrajšavo (npr. background: url(… ) red;)

Več ozadij

CSS3 je dodal podporo za več ozadij, ki se prekrivajo drug nad drugim. Katera koli lastnost, povezana z ozadji, lahko sprejme seznam, ločen z vejicami, na primer ta:

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

Vsaka vrednost na seznamu, ločenem z vejicami, ustreza plasti: prva vrednost je zgornja plast, druga vrednost je druga plast in barva ozadja je vedno zadnja plast.

Recepti

Oglejte si Pen emBzRd Timothyja Millerja (@tjacobdesign) na CodePen.

Podpora za brskalnik

Podpora se med različnimi lastnostmi razlikuje in vsak ustrezen članek v Almanahu vsebuje edinstvene opombe o podpori brskalnika. Osnovno enobarvno ozadje in posamezne slike delujejo povsod, vse, kar ni podprto, pa se vrne k naslednji najboljši stvari, naj bo to slika ali barva.