Háttér átláthatóság CSS.

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:

buy instagram followers

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.