CSS Háttér-áttetszőség. Átlátszó háttér vagy szöveg a CSS használatával

A CSS3 megjelenésével sok szempontból az elrendezés tervezőinek munkájaegyszerűbbé és logikusabbá vált: valójában most lehetőség nyílik arra, hogy valóban rugalmasan felállítsunk egy objektumot, annál ritkábban a JavaScript használatával. Tegyük fel, hogy be kell állítania a háttér átláthatóságát - a CSS azonnal több lehetőséget kínál.

A hátteret egy attribútumkészlet (háttér-kép,háttérképet, háttérképet, háttérképet, háttérképet, hátteret, háttérképet, háttérszínt), amelyek mindegyike külön-külön regisztrálható vagy kombinálható a háttérben. Mindegyiküket részletesebben elemezzük.

A háttérszín-attribútum

A CSS-ben többféle módon adhatja meg a háttérszínt: hexadecimális kód, színnév vagy RGB rekord használata. A CSS3-ban lehetővé vált az RGBA opció használata az RGB rekord helyett.

A hexadecimális színkód be van írvatulajdonság a rács után: háttérszín: # FFDAB9. Ha az ilyen rekord karakterei párban vannak, akkor a kód általában kissé lecsökken: # ccff00 lehet # cf0:

body {háttérszín: # cf0;}.

A név még a leg egzotikusabb virágokban is szerepel. Például a normál piros és fehér szín mellett a NavajoWhite (#FFDEAD) vagy a Honeydew2 (# E0EEE0) is használható:

test {háttérszín: lila;}.

Az RGB vagy RGBA felvétel utolsó verziója lehetővé teszinemcsak a színt, hanem a CSS háttérének átláthatóságát is meghatározták, de a módszer csak IE 9-nél működik. Más böngészők általában felismerik az opciót az átláthatósággal. A W3C szabványok szerint előnyösebb az RGBA használata a megszokott RGB helyett.

Az utolsó érték az RGBA számára, és a háttér homályosságát 0 (áttetsző) értékről 1-re állítja (átlátszatlan).

Vannak még szokatlan jelentések. 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 ).

A háttér-kép attribútum

Az átlátszó háttér legtöbb keresztböngészője a kép használata. A CSS3-ban még néhány képet is megadhat, ez vesszővel történik. például:

body {háttér-kép: url (bg1.png), url (bg2.png)}.

Ezt a módszert az IE8 is támogatja. 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.

A háttérpozíció-attribútum

Ha egy képet használ a háttér meghatározásáhozblokk, a CSS lehetővé teszi, hogy a képet bárhová helyezze a képernyőn. Alapértelmezés szerint a kép a bal felső sarokban található. Az attribútum vagy verbális utasításokat (felső, alsó, bal, jobb) vagy numerikus (százalék, képpont és egyéb mértékegység) vesz. Ebben az esetben két értéket kell megadnia: vízszintesen és függőlegesen:

body {háttérpozíció: jobb középpont;} - ebben a példában a háttér az oldal jobb oldalán található, a kép alatti és felső része azonos.

A háttérméret attribútum

Előfordulhat, hogy a CSS-t a háttér megnyújtásához vagycsökkentse méretét. Ehhez használja az attribútum háttérméretét, és a háttérméretet megadhatja képpontokban vagy százalékokban, és bármely más mértékegységben.

Ennek a tulajdonságnak van némi problémája: A böngészők korábbi verzióinak helyes megjelenítéséhez előtagokat kell használnia. Természetesen a jelenlegi verziók teljes mértékben támogatják ezt az attribútumot, és az adott tulajdonságok iránti igény eltűnt.

A háttér-csatolási attribútum

Ez a tulajdonság határozza meg a háttérkép viselkedését a görgetéskor. Így 3 értéket vehet fel (anélkül, hogy figyelembe kellene venni az örökölést, amely a jelen cikkben bemutatott összes attribútummal közös):

• rögzített - készít képet a háttér előtt;
• felcsavar - a hátteret az elemek többi részével együtt tekerik;
• helyi - a háttérben lévő kép gördül, ha a görgetés tartalma van. A tartalmat meghaladó háttér rögzített.

Példa a felhasználásra:

body {background-attachment fix}.

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

A háttér-eredetű attribútum

Ez az attribútum felelős az elem elhelyezéséért. A korai verziók böngészőihez előtagokat kell használni. Az ingatlannak három paramétere van:

• padding-box a hátlapot az élhez viszonyítva, figyelembe véve a keret vastagságát;
• border-box különbözik az előző tulajdonságtól, mivel a határvonal részben vagy egészben fedheti le a hátteret;
• content-box helyezze el a képet, és a tartalomhoz forduljon.

Ha több értéket ad meg, akkor a böngészők saját módjuk szerint reagálhatnak: a Firefox és az Opera csak az első opciót érzékeli.

A háttér-ismétlés attribútum

Alapesetben, ha a háttér megadja a képet, akkormeg kell ismételni vízszintesen vagy függőlegesen. Ehhez a háttér-ismétlés attribútumot kell használni. Tehát a blokk háttere, amelynek a CSS ilyen tulajdonságot tartalmaz, több paraméter közül választhat:

• no-repeat - a kép az oldalon egyetlen változatban jelenik meg;
• ismétlés - a háttér megismétlődik az x és y tengely mentén;
• repeat-x - csak vízszintesen;
• repeat-y - csak függőlegesen;
• tér - a háttér megismétlődik, de ha a tér nem tölthető fel, a képek között megjelenik a kép;
• kerek - A kép méretarányos, ha nem tudja teljes egészében kitölteni az egész képet.

Példa egy attribútum használatára:

body {background-repeat: nem ismétlődő ismétlés} - hasonlóképpen background-repeat: ismételje meg az y-t.

A CSS3-ban lehetséges megadni az értékeket több képhez, ha vesszővel vesszük fel a paramétereket.

A háttérklip attribútum

Ez az attribútum definiálja a háttérbeli magatartást a határokon belül (például pontozott keretek esetén):

• padding-box - a háttér szigorúan a blokkban látható;
• border-box - a kép a keret alá kerül;
• content-box - a háttérben lévő kép csak a tartalom belsejében jelenik meg.

Példa a felhasználásra:

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

A Chrom és a Safari használatához a -webkit-előtag szükséges.

Az áttetszőség és a szűrő tulajdonságai

Az opacitás tulajdonság lehetővé teszi az áttetszőség beállításátbackground - A CSS tulajdonság minden böngészőben működni fog. Az érték 0,0 és 1,0 közé esik. Ezzel beállíthatja a CSS háttérének átláthatóságát egész szám nélkül: a 0,3 helyett elegendő írni .3:

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

A háttérkép átláthatóságának beállításához, amelynek CSS-je még a kilencedik verzió alatti IE számára is megfelelő, használja a szűrő attribútumot:

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

Ebben az esetben az opacitás értékének beállítása0 és 100 között. Vegye figyelembe, hogy az átlátszatlanság attribútuma eltér az áttetszőség beállításától az RGBA öröklődésétől: az átlátszatlanság használata esetén nem csak a háttér átlátszó, hanem a blokk belsejében lévő összes elem is átlátszó.

Mindig kövesse nyomon a használati statisztikákatböngészők a FÁK-ban és az összes többi országban. A legnagyobb probléma az összes elrendező számára az IE régi verziója, nem engedik a CSS3 legteljesebb használatát. Amikor elrendezést készít, ne felejtse el használni olyan speciális szolgáltatásokat, amelyek ellenőrzik, hogy a böngésző támogatja-e a CSS-tulajdont. Ha nem tudja telepíteni a böngészők régebbi verzióit, keressen egy olyan szolgáltatást, amely teszteli a webhely működését különböző böngészőkben.

</ p>>