Az Advent a CSS3 DTP munka sok szempontból vált egyszerűbb és logikusabb: elvégre akkor most meg, hogy rugalmasan konfigurálható egy tárgy, ritkábban igénybe a JavaScript.Tegyük fel, hogy módosítania kell az átláthatóságot a háttérben - CSS azonnal számos lehetőséget kínál.
háttér által meghatározott attribútumok (background-image, background-position, háttér méretű, background-repeat, background-attachment, háttér-eredetű, háttér-klip, background-color), amelyek mindegyike csak az előírt, vagyegyesíteni ugyanolyan attribútum háttérben.Vizsgáljuk meg mindegyik ilyen részletesen.
attribútum background-color
A CSS-ben a háttér színét lehet beállítani több szempontból is: segítségével a hexadecimális kódját, nevét vagy az RGB-bejegyzést.Ebben CSS3 lehetővé vált, hogy használja ahelyett, RGB-felvételi lehetőség a RGBA.
hexadecimális színkód van írva az ingatlan után a rács: background-color: # FFDAB9.Ha a karakterek páros meccset egy ilyen rekord, a kód általában egy kis vágás: # ccff00 felírható a # cf0:
body {background-color: # cf0;}.
név van, még a legegzotikusabb színeket.Például, amellett, hogy a hagyományos piros-fehér, akkor NavajoWhite (#FFDEAD) vagy Honeydew2 (# E0EEE0):
body {background-color: lila;}.
utolsó lehetőség RGB vagy RGBA rekordot megadhatja, nem csak a színe, hanem az átláthatóság a háttér CSS, de a munkába menet az IE 9 csak régebbi verziók.Más böngészők felismerik normál variáns átláthatóság.Szerint a W3C szabványok célszerű használni az összes ugyanazt a RGBA helyett a több szokásos RGB.
utolsó érték a RGBA beállítja a fedettség a háttér és a 0-tól (átlátszó) és 1 (átlátszatlan).
van néhány szokatlan értékeket.A háttér színe is megadható HSL és HSLA.Mindkettőt hozzá CSS3, és ezért nem támogatja az IE 9 vagy magasabb.Opciók azonosak RGB vagy RGBA, csak más formátumban: Hue (színárnyalat - értékét a színkör, adják fok), telített (telítettség - szín intenzitása százalékban, 0-100), Világosság (világosság - fényerő, hasonlóan mértük paramétert Saturate).
attribútum background-image
legtöbb cross-böngésző verzióját áttetsző hátteret - a használata a képet.Ebben CSS3, megadhatja még több képet, ez megtörtént keresztül egy vessző.Példa:
body {background-image: url (bg1.png), url (bg2.png)}.
támogatja ezt még IE8.Több kép, mint a háttér használt elrendezés a gumi.Fontos, hogy ne felejtsük el, hogy bármilyen képet állított be a CSS háttér színe, mert a felhasználók egyszerűen feltöltheti a képet.
attribútum background-position
Ha egy kép, hogy meghatározza a háttérben blokk, CSS lehetővé teszi, hogy helyezze el a képet a képernyő bármely részén.Alapértelmezésben a kép található a bal felső sarokban.Attribútum fogad el semmilyen verbális irányból (felső, alsó, bal, jobb), vagy numerikus (kamat, pixel és más egységek).Meg kell határozni a két érték vízszintes és függőleges:
body {background-position: jobb center;} - ebben a példában, a háttérben fog található a jobb oldalán, a tetején és alján a távolság a kép ugyanaz.
attribútum háttér méretű
Néha meg kell használni a CSS feszítse meg a háttérben, vagy csökkentheti annak méretét.Erre a célra, az attribútum háttér-méret, és a méret lehet meghatározni, mint háttér pixel vagy százalék, vagy bármely más mértékegységben.
Ezzel a tulajdonság, van néhány probléma: helyes megjelenítés a háttérben a régebbi böngészők kell használnia előtagot.Természetesen a jelenlegi változat teljes mértékben támogatja ezt a jellemzőt, és szükség van bizonyos tulajdonságok eltűnt.
attribútum background-attachment
Ez a jellemző a viselkedés a háttérképet, amikor a görgetés.Például vehet 3 értékek (kivéve örökli, az összesen minden jó tulajdonsága ebben a cikkben):
- fix - teszi a képet a háttérben a rögzített;
- scroll - a háttérben görgeti a többi elemet;
- helyi - a kép a háttérben gördül, ha a görgetés tartalmat.Háttér, amely túlmutat a tartalmat rögzített.
Felhasználási példa:
body {background-attachment fix}.
Jelenleg Firefox nem támogatja a legújabb ingatlan (helyi).
attribútum háttér-eredetű
Ez a jellemző a felelős a helymeghatározás az elem.Böngészők korábbi verziók használata szükséges előtagokat.Maga az ingatlan három paraméter:
- padding-box pozíciók szélétől a háttérben, miközben figyelembe veszi a keret vastagsága;
- border-box tulajdonságai eltérnek a korábbitól, hogy a határvonal lehet teljesen vagy részben fedezni a háttérben;
- tartalmi-box helymeghatározás kép pryavyazyvaya annak tartalmát.
Ha több értéket, a böngésző képes reagálni a maguk módján: Firefox és az Opera csak akkor fogadja el az első lehetőséget.
attribútum background-repeat
Általános szabály, hogy ha a háttérkép van adva, azt meg kell ismételni vízszintesen vagy függőlegesen.Ezért és használt attribútum background-repeat.Így blokk háttér, CSS, amely tartalmaz egy ilyen tulajdonság van egy a különféle opciók:
- no-repeat - kép megjelenik az oldalon egy-egy formája;
- ismételje - minta ismétlődik az x és y;
- repeat-x - csak vízszintesen;
- repeat-y - csak függőlegesen;
- helyet - ismétlődik, de ha megtelik nem, akkor ott vannak üregek képek között;
- forduló - a kép arányainak, ha nem tölti ki a teljes területet teljes képet.
Példa attribútum:
body {background-repeat: no-repeat ismétlés} - hasonlóan background-repeat: repeat-y.
A CSS3 meghatározhatja értékek több képre, ha az átviteli paramétereket vesszővel elválasztva.
attribútum háttér-klip
Ez a jellemző a viselkedés a háttérben alatt határait (például abban az esetben, a pontozott keretek):
- padding-box - háttérben látható a belsejében a blokk;
- határ-box - hatálya alá tartozik a kép;
- tartalmi-box - a képen a háttérben csak akkor jelenik meg a tartalmat.
Felhasználási példa:
body {background-klip: content-box;}.
Chrom és a Safari használata szükséges előtag -webkit-.
átlátszatlansági attribútummal, és szűrjük
fedőképesség attribútum lehetővé teszi, hogy a háttérben az átláthatóság - CSS tulajdonság működni fog minden böngészőben.Az érték állítható 0,0-1,0 inclusive.Ezzel lehet beállítani az átláthatóságot a háttérben CSS nélkül egy egész értéket helyett 0,3 elég, hogy írjon 0,3:
.block {background-image: url (img.png);opacity: 0,3;}.
állítani a hátteret az átláthatóság, CSS megfelelő még az IE alatti kilencedik változata, az attribútum szűrő:
.block {background-image: url (img.png);Keresés: alpha (fedőképesség = 30);}.
Ebben az esetben a homály van állítva 0 és 100 között Ne feledje, hogy a homály számukra különböző átláthatóság beállításoknak RGBA öröklődés: fényelnyelés egy átlátszó háttér nem csak, hanem az összes elem a készülék belsejében.
Mindig ellenőrizze, hogy a böngésző használati statisztikákat a FÁK és az összes többi országban.A legnagyobb probléma az összes DTP - régebbi verziói IE, ők nem teszik lehetővé teljes mértékben kihasználja a CSS3.Ha az elrendezés ne felejtsük el, hogy használja a speciális szolgáltatásokat, hogy ellenőrizze, hogy a böngésző egy ingatlan CSS.Ha nem tudja telepíteni a régebbi verziójú böngészőket, az lesz a szolgáltatás, amely ellenőrzi a művelet a helyszínen a különböző böngészőkben interneten.
