CSS referencia => Szín és háttér

5.3 Szín- és háttértulajdonságok

Ezek a tulajdonságok írják le egy elem (gyakran előtérszínként [foreground color] említett) szín és háttértulajdonságait. A háttér az a felület, amelyre a tartalom kirajzolásra kerül. Ez lehet háttér szín, vagy háttér kép. Szintén ezek a tulajdonságok használhatóak néhány más fontos megjelenítési lehetőség beállításához: háttér-kép helyzete, legyen-e és hányszor ismételve, fix legyen-e, vagy gördíthető a vászonhoz képest, stb...

A color tulajdonság normál módon öröklődik. A háttér tulajdonságai nem öröklődnek, de az egyes szülő elemek hátterei áttűnnek az alapértelmezett háttérértéken, mivel a background-color alapértelmezett értéke a transparent.

Vissza a hivatkozó oldalra

5.3.1 'color'

Értéke lehet: szín
Alapértelmezés: Böngészőfüggő.
Alkalmazható: Minden elemhez
Öröklődik: Igen
Százalékos értékek: Nincs értelmezve

Ez a tulajdonság írja le egy elemhez tartozó szöveg színét; gyakran előtérszínként (foreground color) történik róla említés. Egy szín értékének meghatározása többféle módon történhet:

EM { color: red }
EM { color: rgb(255,0,0) }
EM { color: #FF0000 }

Fenti három deklaráció mindegyike az EM elem szövegéhez a vörös színt rendeli hozzá. Az első esetben a szín nevét írtuk le, a második és harmadik esetben a szín RGB kódját; először decimálisan, az utolsó esetben hexadecimálisan.

Vissza a hivatkozó oldalra

5.3.2 'background-color'

Értéke lehet: <szín> | transparent
Alapértelmezés: transparent
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Nincs értelmezve

Ez a tulajdonság állítja be egy elem háttérszínét.

H1 { background-color: red }
H1 { background-color: rgb(255,0,0) }
H1 { background-color: #FF0000 }

Vissza a hivatkozó oldalra

5.3.3 'background-image'

Értéke lehet: <url> | none
Alapértelmezés: none
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Nincs értelmezve

Ez a tulajdonság állítja be egy elem hátterként látható képet. Egy háttérkép beállításakor beállítható háttérszín is, amely akkor látható, ha a kép nem elérhető. Ha a kép megjeleníthető, a háttérszínt el fogja takarni.

BODY { background-image: url(hatter.gif) }
P { background-image: none }

Példa

Vissza a hivatkozó oldalra

5.3.4 'background-repeat'

Értéke lehet: repeat |
repeat-x | repeat-y |
no-repeat

Alapértelmezés: repeat
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Nincs értelmezve

Ha van háttér-kép beállítva, a 'background-repeat' tulajdonsággal állítható be, hogy legyen-e és hányszor legyen ismételve a kiválasztott kép.

A repeat érték azt jeleni, hogy a kép vízszintesen és függőlegesen egyaránt ismétlődni fog. A repeat-x (repeat-y)érték felelős a kép vízszintes (függőleges) ismétlődéséért; így egy kisebb méretű háttérképből a képernyő egyik oldalától a másikig érő sáv állítható elő.

BODY
    {
    background: red url(hatter.gif);
    background-repeat: repeat-y;
    }

Példa

Fenti példában a háttérkép függőlegesen ismétlődik.

Vissza a hivatkozó oldalra

5.3.5 'background-attachment'

Értéke lehet: scroll | fixed
Alapértelmezés: scroll
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Nincs értelmezve

Ha van beállított háttérkép, a 'background-attachment' értéke határozza meg, hogy fixen marad-e, vagy a tartalommal együtt gördíthető.

BODY
    {
    background: red url(hatter.gif);
    background-repeat: repeat-y;
    background-attachment: fixed;
    }

Példa

A böngészők néha a fixed értéket is scroll-nak értelmezik. A W3C ajánlása azt tartalmazza, hogy a böngészők a fixed értéket értelmezzék helyesen, legalább a HTML és a BODY elemek vonatkozásában, mivel a weblapok szerzőinek nincs arra lehetőségük, hogy külön hátteret válasszanak csak a gyengébb képességű böngészők számára.

Vissza a hivatkozó oldalra

5.3.6 'background-position'

Értéke lehet:[<százalékos> | <hossz>]{1,2}|[top | center | bottom]|| [left | center | right]
Alapértelmezés: 0% 0%
Alkalmazható: Blokkszintű- és helyettesített elemekhez
Öröklődik: Nem
Százalékos értékek: Viszonyítási alap a formázott elem

Ha van beállított háttér-kép, a 'background-position' értéke határozza meg annak betöltődéskor elfoglalt helyzetét. A 0% 0% értékpár használatával a kép az elemet körbefogó doboz bal felső sarkába kerül. (Nem a margót, szegélyt, kitöltést tartalmazó dobozról van szó.) A 100% 100% értékpár a kép jobb alsó sarkát az elem jobb alsó sarkába helyezi. A 14% 84% értékpár a képet az elemen vízszintesen a 14%-ot jelentő ponttól függőlegesen a 84%-ot jelentő pontig helyezi el.

A 2cm 2cm értékpár a képet az elem bal felső sarkától 2 cm-re balra és 2 cm-re lefelé helyezi el.

Ha csak egy százalékos, vagy hosszúságérték van megadva, az csak a vízszintes pozíciót állítja be, a függőleges pozíció értéke 50% lesz. Két érték megadása esetén a vízszintes pozícióra vonatkozó értéket kell először megadni. A hosszúság- és százalékos értékek kombinációja megengedett (50% 2cm). Megengedett a negatív értékek használata is.

A háttérkép helyzetének beállításához használhatók kulcsszó-értékek is. A kulcsszavak nem kombinálhatók a hosszúság- és százalékos értékekkel. A használható kulcsszó-kombinációk és értelmezésük:


    Kulcsszavak                            | Értelmezésük
-------------------------------------------+--------------     
'top left' és 'left top'                   |      0%   0%
'top', 'top center', 'center top'          |     50%  50%
'right top', 'top right'                   |    100%   0%
'left' 'left center', 'center left'        |      0%  50%
'center', 'center center'                  |     50%  50%
'right', 'right center', center right'     |    100%  50%
'bottom left', 'left bottom'               |      0% 100%
'bottom', 'bottom center', 'center bottom' |     50% 100%
'bottom right', 'right bottom'             |    100% 100%
-------------------------------------------+--------------

Példák:

BODY {background: url(hatter.gif) right top
BODY {background: url(hatter.gif) top center
BODY {background: url(hatter.gif) center
BODY {background: url(hatter.gif) bottom

Példa

Ha a háttér-kép rögzítve van a vászonhoz (lásd a background-attachment tulajdonságot följebb), az elem elhelyezéséhez a méretek viszonyítása nem az elemhez, hanem a vászonhoz történik.

Vissza a hivatkozó oldalra

5.3.7 'background'

Értéke lehet: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Alapértelmezés: Nincs definiálva
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Használható a <background-position> tulajdonsághoz.

A background egy ún. gyorstulajdonság, amellyel egy helyről állítható be az összes háttérre vonatkozó tulajdonság. Használható értékei megegyeznek az egyedi háttér-tulajdonságok összes értékeivel.

BODY {background: red}
P {background: url(hatter.jpg) gray 50% repeat fixed}

A background tulajdonság mindig beállítja az összes egyedi tulajdonságot. Az első példában csak a háttér-szín lett beállítva, a többi tulajdonság alpértelmezett értékeit kapja. A második példában az összes egyedi tulajdonság kapott kezdőértéket.

előző  tetejére  következő