CSS background átláthatóságot. Átlátszó háttér vagy szöveges CSS

Az Advent a CSS3 webes tervezők munkáját sok szempontból könnyebb lett és logikusabb: elvégre, akkor most igazán rugalmasan testre bármilyen tárgy, ritkábban folyamodnak JavaScript. Tegyük fel, hogy be kell állítani 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 egy sor attribútumok (háttér-kép, háttér-helyzetben , a háttér-mérete, a háttér-repeat, háttér-attachment, háttér-eredetű, háttér-klip, háttér-szín), amelyek mindegyike lehet rendelni külön-külön vagy kombinált alatt az attribútum háttérben. Nézzük mindegyik részletesen.

Képesség background-color

A CSS-ben a háttér színét lehet beállítani több módon: egy hexadecimális kódját, nevét vagy az RGB-bejegyzést. A CSS3 lehetővé vált, hogy használni, hanem RGB-felvétel opció RGBA.

Hex színkódot rögzítik az ingatlan után a rács: background-color: # FFDAB9. Ha a karakterek ebben a bejegyzés ugyanaz pár, a kód általában egy kis vágás: # ccff00 felírható # cf0:

body {background-color: # cf0 ;}.

A név, még a legegzotikusabb színeket. Például, amellett, hogy a hagyományos piros és fehér használhatja NavajoWhite (#FFDEAD) vagy Honeydew2 (# E0EEE0):

body {background-color: lila; }.

Az utóbbi lehetőség RGB vagy RGBA bejegyzés megadhatja, hogy nem csak a színe, hanem az átláthatóságot a CSS háttér, de a módszer csak akkor működik, IE-nél régebbi változatai 9. Más böngészők felismerik normál változat átláthatóságot. Szerint a W3C szabványoknak célszerű használni még RGBA ahelyett, hogy a szokásos RGB.

Az utolsó érték RGBA háttérben, és beállítja az áttetszőséget 0 (átlátszó), hogy 1 (átlátszatlan).

Van néhány szokatlan értékeket. A háttér színe lehet beállítani a HSL és HSLA. Mindkét adunk CSS3, és ezért nem támogatja az IE 9 vagy magasabb. Kiviteli alakok azonos RGB vagy RGBA, csak más formátumban: Hue (árnyékban - értéke a színes kerék, adott fokban), telített (telítettség - színintenzitás százalékában, 0-tól 100), könnyűség (világosság - fényerő, mért hasonlóan paraméterbe Saturate ).

Képesség background-image

A legtöbb cross-böngésző verzióját a háttere átlátszó - ez a használata a kép. A CSS3, akkor meg még több képet, mindez olyan vessző. például:

{Háttér-test image: url (bg1.png), url (bg2.png)}.

Ez a támogatását is, IE8. Több kép a háttérben a használt gumi az elrendezés. Fontos, hogy ne felejtsük el, hogy használja fel a kép és a háttér színét a CSS, mivel a felhasználók egyszerűen feltöltheti a képet.

Képesség background-position

Ha a kép a háttér egység, CSS lehetővé teszi, hogy helyezze el a képet a képernyőn bárhol. Alapértelmezésben a kép található a bal felső sarokban. Képesség vesz vagy szóbeli utasításokat (felső, alsó, bal, jobb), a numerikus (kamat, pixel és más egységek). Ebben az esetben meg kell adnia a két érték, a horizontális és vertikális:

body {background-position: jobb Center ;} - ebben a példában, a minta lesz található a jobb oldalán, a felső és alsó, a kép távolság azonos.

Képesség háttér méretű

Néha szükség van, hogy nyúlik a CSS háttér vagy csökkentheti annak méretét. Ehhez az attribútum háttér méretű, és a méret a háttér lehet állítani pixelben vagy százalékban, és bármely más egységek.

Ezzel a tulajdonság, van néhány probléma: helyes megjelenítés a háttérben a korábbi verziók a böngésző előtagokat kell használni. Természetesen a jelenlegi verzió teljes mértékben támogatja ezt a tulajdonságot, és szükség van bizonyos tulajdonságok eltűnt.

Attribútum háttér-attachment

Ez a jellemző a viselkedés a háttérképeket görgetés közben. Így is igénybe vehet, 3 értékek (ide nem értve az örökli a teljes minden attribútumok Ebben a cikkben tárgyalt):

• fix - teszi a képet a háttérben rögzíteni;
• görgetés - háttér görgeti a többi elemet;
• helyi - a kép a háttérben görgetése, ha görgetés a tartalma. Háttér, amely túllép a tartalmát a keret van rögzítve.

Használati példa:

body {background-attachment rögzített}.

Jelenleg Firefox nem támogatja az utolsó tulajdonság (helyi).

Képesség background-eredetű

Ez az attribútum a felelős a pozicionáló elem. Korai böngészők használata szükséges előtagokat. Maga az ingatlan három paraméter:

• padding-box van pozícionálva, hogy a szélén minta, míg figyelembe véve a keret vastagsága;
• border-box tulajdonságok eltér a korábbi, hogy a határvonal lehet teljesen, vagy részben átfedik a minta;
• tartalom-doboz elhelyezése kép pryavyazyvaya annak tartalmát.

Ha több értéket, akkor a böngészők tudnak reagálni a maga módján: a Firefox és az Opera érzékelik csak az első lehetőség.

Képesség background-repeat

Általános szabály, hogy ha a háttérkép beállítva, akkor meg kell ismételni vízszintesen vagy függőlegesen. Erre és használt attribútum background-repeat. Így blokk háttér, CSS, amely tartalmaz egy ilyen tulajdonság lehet egy több paraméter:

• no-repeat - a kép megjelenik az oldalon egy-egy változata;
• ismétlem - háttér megismételjük az x és y;
• repeat-x - csak vízszintesen;
• repeat-y - csak függőlegesen;
• tér - háttérben ismételjük meg, de ha a tér nem lehet kitölteni a képek között jelennek meg üres;
• forduló - a kép arányainak, ha nem tölti ki a teljes terület teljes kép.

Példa a attribútumok:

body {background-repeat: no Ismétlés Ismétlés} - hasonló background-repeat: repeat-y.

A CSS3 meghatározhatja értékeket több kép felsorolásakor paramétereket vesszővel elválasztva.

Képesség háttér-klip

Ez az attribútum határozza meg a viselkedését a háttérben a határokat (például, abban az esetben a pontozott keretek):

• padding-box - háttér megjelenik a belső blokk;
• border-box -, a kép jön keretében;
• content-box - a képen a háttérben csak akkor jelenik meg a tartalom.

Használati példa:

body {háttér-klip: tartalom- box;}.

Chrom és a Safari igényelnek -webkit- előtagot.

Opacity attribútumok és szűrő

fényelnyelés tulajdonság lehetővé teszi, hogy az átláthatóság a háttérben - CSS tulajdonság fog működni minden böngészőben. A beállított érték tartományban 0,0-1,0 befogadó. Ebben az esetben, akkor beállíthatja az átláthatóságot a CSS háttér nem egész érték helyett 0,3 elég, hogy írjon .3:

.block {background-image: url ( img.png); opacitás: .3;}.

Ahhoz, hogy a háttér homály, CSS megfelelő még az IE alatti kilencedik változat, használja a szűrő attribútum:

.block {background-image: url ( img.png); szűrő: alfa (opacitás = 30)}.

Ebben az esetben, a fedettség beállított érték 0 és 100 között Megjegyezzük, hogy a fényelnyelés attribútum különböző átláthatóság beállításoknak RGBA öröklés: ha fényelnyelés világossá válik nemcsak a háttérben, hanem az összes elemet a készülék belsejében.

Mindig figyelemmel kíséri a használati statisztikáit CIS böngészők és minden más országokban. A legnagyobb probléma az összes DTP - régebbi verziói IE, hogy nem teszi lehetővé, hogy használja a teljes mértékben CSS3. Az elrendezés ne felejtsük el, hogy használja a speciális szolgáltatásokat, ellenőrizze, hogy a böngésző támogatja bármely CSS tulajdonság. Ha nem tudja telepíteni a régebbi verziójú böngészőt, meg olyan szolgáltatás, amely ellenőrzi a helyszíni munka több böngészőben az interneten.