Háttér - CSS-trükkök | CSS Almanach 2025

A backgroundCSS tulajdonság lehetővé teszi bármely elem hátterének vezérlését (mi fest az elem tartalma alatt). Ez egy rövidített tulajdonság, ami azt jelenti, hogy lehetővé teszi, hogy megírja, mi lenne több CSS tulajdonság egyben. Mint ez:

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 nyolc további tulajdonságból áll:

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

Ezeknek a tulajdonságoknak tetsző kombinációját szinte bármilyen sorrendben használhatja (bár a specifikációban javasolt sorrend fent van). Van azonban egy gotcha: bármi, amit nem ad meg a backgroundtulajdonságban, automatikusan az alapértelmezettre kerül. Tehát, ha ilyesmit csinál:

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

A háttér átlátszó lesz, vörös helyett. A javítás azonban egyszerű: csak határozzon background-colorutána background, vagy csak használja a gyorsírást (pl. background: url(… ) red;)

Több háttér

A CSS3 több hátteret támogatott, amelyek egymás tetején helyezkednek el. A háttérrel kapcsolatos bármely tulajdonság vesszővel elválasztott listát vehet fel, például:

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

A vesszővel elválasztott lista minden értéke egy rétegnek felel meg: az első érték a legfelső réteg, a második érték a második réteg, és a háttérszín mindig az utolsó réteg.

Receptek

Lásd Timothy Miller (@tjacobdesign) Pen emBzRd-jét a CodePen-en.

Böngésző támogatás

A támogatás a különféle tulajdonságok szerint változik, és az Almanac minden egyes cikke egyedi böngészőtámogatási megjegyzéseket tartalmaz. Az alapvető egyszínű hátterek és egyes képek azonban mindenhol működnek, és bármi, ami nem támogatott, csak a következő legjobb dologra esik vissza, legyen az kép vagy szín.