Szín- és háttérbeállítás stíluslappal
A háttérkép beállításai (II. rész)
A háttérkép széleinek levágása (background-clip)
A background-clip segítségével levághatjuk a rendelkezésre álló helyből esetlegesen kilógó képrészeket.
Értékek:
- border-box: hatására a böngésző levágja a háttérképnek az elem szegélyén túl kilógó részeit. (ez az alapértelmezett)
- padding-box: a böngésző levágja a háttérképnek a belső térköz külső határán kívül eső részeit.
- content-box: hatására böngésző levágja a háttérképnek az elem tartalmán túllógó részeit.
Vissza a tartalomjegyzékhez
Több háttérkép megadása (multiple background)
A background-image paraméterben vesszővel elválasztva egyszerre több képet is értékül adhatunk, így egyszerre több háttérképet állíthatunk be. Az első megadott háttérkép kerül a legfelső rétegre, alá a következő és így tovább
Ezen hátterek tulajdonságait a többi háttérparaméter esetén ugyanígy, vesszővel elválasztva adhatjuk meg.
Ha a tulajdonságoknak nem adunk elég értéket, akkor a böngésző a meglevő paraméterlistát addig ismételgeti, amíg szükséges.
PéldaMagyarázat
- Az első példában a két háttérképet nem ismételtetjük és ellentétes sarkokba pozícionáltuk.
- A második példában az első kép vízszintesen ismétlődik, a második függőlegesen. A virágos kép azért takarja a leveket tartalmazó képet, mert az előbbit adtuk meg a listában először.
- A harmadik példában mindkét képet függőlegesen ismételtetjük.
- A negyedik példában az első kép függőlegesen ismétlődik, míg a második kép mozaikszerűen.
Vissza a tartalomjegyzékhez
A background gyorstulajdonság (background)
A background gyorstulajdonsággal az eddig vett háttértulajdonságokat egyetlen nagy értékadássá vonhatjuk össze.
Értékek:
Az különböző értékeket szóközzel választjuk el egymástól.
- Először adjunk meg egy háttérszínt, egy tetszőleges színérték segítségével.
- Ezután adjuk meg a háttérképet egy url segítségével.
- Adjuk meg a háttérkép pozícióját.
- Ezután adjuk meg a háttér méretét.
- Majd adjuk meg a kép ismétlődési szabályát.
- Ezután adjuk meg a kép gördíthetőségét.
- Ezt követően megadhatjuk a háttérkép elhelyezésére (background-origin) vonatkozó értéket.
- Adjuk meg a background clip értéket.
- Lehetőségünk van egyetlen background gyorstulajdonságnak több ilyen értéklistát megadni, ha több hátteret is szeretnénk egyszerre. Ezeket vesszővel választjuk el egymástól.
- Ha csupán az inherit értéket adjuk értékül, akkor a tulajdonság éréke a szülőelemtől öröklődik meg.
Szegély mintázat (kép) beállítása (border-image)
A border-image tulajdonság segítségével saját képpel bírálhatjuk felül a szegélystílust. Ezt a képet a böngésző kilenc részre vágja, amiből a középső részt elhagyja, sarkokat a szegély sarkainál használja fel, a széleket pedig nyújtva vagy ismételve a szélekhez használja fel.
Paraméterek és értékeik:
A tulajdonság paraméterei szóközzel vannak elválasztva.
- Először adjuk meg a háttérképnek szánt képre mutató url-t.
- Ezután következik egy legalább egy, legfeljebb négy lehetséges hosszúságérték paramétert tartalmazó szóközzel elválasztott paraméterlista. Ezek az értékek megadják, hogy melyik oldalról a kép szélétől számítva hány pixelnyire kell megvágni azt.
- Egy paraméter esetén, ez minden oldalról ugyanaz a távolság lesz.
- Két paraméter esetén az első a felső és alsó, a második a jobb és a bal oldali távolságot határozza meg.
- Három érték esetén az első a felső, a második a jobb és bal, a harmadik az alsó távolságot határozza meg.
- Négy érték esetén az első a felső, a második a jobb, a harmadik az alsó és a negyedik a bal távolságot határozza meg.
- Végül megadjuk, hogy a feldarabolt kép széleit hogyan használjuk fel a szegélyszéleinek:
- A strech érték hatására a böngésző a szükséges méretűre nyújtja a képszeletet.
- A repeat érték hatására a böngésző nyújtás helyett addig ismétli a képszeleteket, amíg szükséges.
- A round érték hatása ugyanaz, mint a repeat azonban átméretezi annyira a képszeleteket, hogy mintázatuk pontosan illeszkedjen a sarokpontokkal.
Tanulási tippA tulajdonság kipróbálásához javasoljuk felkeresni a Border-image-generator oldalt, ahol az egyes paramétereket dinamikusan lehet változtatni.
Vissza a tartalomjegyzékhez