Průhlednost pozadí CSS. Průhledné pozadí nebo text pomocí CSS

S příchodem CSS3, práce návrhářů rozložení v mnoha ohledechstala se jednodušší a logičtější: ve skutečnosti je nyní možné skutečně flexibilně nastavit objekt, a to méně často využívat JavaScript. Řekněme, že potřebujete upravit průhlednost pozadí - CSS okamžitě nabízí několik možností.

Pozadí je nastaveno sadou atributů (pozadí, obrázek,pozadí pozadí, velikost pozadí, opakování pozadí, příloha na pozadí, pozadí pozadí, klip na pozadí, barva pozadí), z nichž každá může být samostatně registrována nebo kombinována pod atributem pozadí. Každou z nich podrobněji analyzujeme.

Atribut barvy pozadí

V CSS můžete určit barvu pozadí několika způsoby: pomocí hexadecimálního kódu, názvu barvy nebo záznamu RGB. V CSS3 bylo možné použít místo RGB záznamu možnost RGBA.

Je napsán hexadecimální kód barevvlastnost za mřížkou: barva pozadí: # FFDAB9. Pokud jsou znaky v takovém záznamu porovnány ve dvojicích, kód je obvykle mírně zkrácen: # ccff00 může být napsán jako # cf0:

tělo {barva pozadí: # cf0;}.

Jméno je dokonce i v nejvíce exotických květinách. Například kromě standardní červené a bílé můžete použít NavajoWhite (#FFDEAD) nebo Honeydew2 (# E0EEE0):

tělo {barva pozadí: fialová;}.

Poslední verze záznamu RGB nebo RGBA umožňujenastavit nejen barvu, ale také průhlednost pozadí CSS, ale metoda pracuje v IE pouze přes verzi 9. Ostatní prohlížeče normálně rozpoznají tuto možnost průhledností. Podle standardů W3C je vhodnější použít RGBA namísto obvyklého RGB.

Poslední hodnota pro RGBA a nastavení opacity pozadí od 0 (transparentní) do 1 (neprůhledné).

Existují ještě nějaké neobvyklé významy. Barvu pozadí lze nastavit pomocí HSL a HSLA. Oba byly přidány do CSS3, a proto nejsou podporovány IE verze 9 nebo vyšší. Provedení identické RGB nebo RGBA, pouze v jiném formátu: Odstín (odstín - hodnota na barevném kole, je uvedena ve stupních), Saturate (saturace - intenzita barvy v procentech, od 0 do 100), světlost (lehkost - jas, měřeno obdobným parametr nasycení ).

Atribut pozadí-obrázek

Nejrozšířenější verze průhledného pozadí je použití obrázku. V CSS3 můžete zadat i několik obrázků, to je provedeno čárkou. Příklad:

tělo {pozadí-obrázek: url (bg1.png), adresa URL (bg2.png)}.

Tato metoda je podporována i IE8. Pro ukládání gumy se používá několik obrázků jako pozadí. Nejdůležitější je, nezapomeňte, když používáte libovolný obrázek, také nastavit barvu pozadí v CSS, protože uživatelé nemohou spustit obrázek.

Atribut pozadí-pozice

Pokud pro zadání pozadí použijete obrázekblok, CSS umožňuje umístit obrázek kdekoli na obrazovce. Ve výchozím nastavení se obrázek nachází v levém horním rohu. Atribut má buď verbální instrukce (horní, dolní, levý, pravý) nebo číselné (procenta, pixely a další měrné jednotky). V tomto případě musíte zadat dvě hodnoty: horizontálně a vertikálně:

tělo {pozici pozadí: pravý střed;} - v tomto příkladu bude pozadí umístěno na pravé straně stránky, přičemž spodní a horní část vzdálenosti bude stejná.

Atribut velikosti pozadí

Někdy je potřeba použít CSS k protažení pozadí nebosnížit jeho velikost. Chcete-li to provést, použijte velikost atributu pozadí a velikost pozadí lze zadat v pixelech nebo procentech a v jiných měrných jednotkách.

V tomto atributu jsou některé problémy: Chcete-li správně zobrazit pozadí v dřívějších verzích prohlížečů, musíte použít předpony. Samozřejmě, aktuální verze plně podporují tento atribut a potřeba specifických vlastností zmizela.

Atribut pozadí-připevnění

Tento atribut určuje chování pozadí obrázku při rolování. Může tedy trvat 3 hodnoty (bez ohledu na dědičnost, společné všem atributům uvedeným v tomto článku):

pevné - vytváří obraz proti statickému pozadí;
rolovat - pozadí se posouvá spolu s ostatními prvky;
místní - snímek na pozadí se posouvá, pokud má posun obsah. Pozadí, které překračuje obsah, je opraveno.

Příklad použití:

body {fix-attachment fixed}.

V současné době Firefox nepodporuje poslední vlastnost (místní).

Atribut původu pozadí

Tento atribut je zodpovědný za umístění prvku. Prohlížeče starších verzí vyžadují použití předpon. Samotný majetek má tři parametry:

padding-box Umístí pozadí vzhledem k okraji, s přihlédnutím k tloušťce rámu;
hraniční rámeček liší se od předchozí vlastnosti tím, že hraniční čára může zcela nebo částečně pokrýt pozadí;
obsah-box Umístěte obrázek, přitahujte jej k obsahu.

Pokud jsou zadány více hodnot, prohlížeče mohou reagovat vlastním způsobem: Firefox a Opera vnímají pouze první možnost.

Atribut opakování pozadí

Zpravidla platí, že pozadí je určeno obrazemmusí být opakovány vodorovně nebo svisle. Za tímto účelem se používá atribut opakování pozadí. Takže pozadí bloku, jehož CSS obsahuje takovou vlastnost, může mít jeden z několika parametrů:

neopakujte - obrázek se zobrazí na stránce v jedné variantě;
opakujte - pozadí se opakuje podél x a y os;
opakovat-x - pouze vodorovně;
opakování-y - pouze vertikálně;
prostor - pozadí se opakuje, ale pokud není možné místo naplnit, objeví se obrázky mezi obrázky;
kolo - Obraz je zmenšen, pokud nemůžete celou oblast naplnit celým obrazem.

Příklad použití atributu:

tělo {opakování pozadí: opakované opakování} - podobně opakování pozadí: opakování-y.

V CSS3 je možné zadat hodnoty pro několik obrázků, pokud seznam parametrů používáte čárkou.

Atribut pozadí pozadí

Tento atribut definuje chování pozadí pod hranicemi (například v případě bodkovaných rámců):

padding-box - pozadí je zobrazeno striktně v bloku;
hraniční rámeček - snímek je pod rámečkem;
obsah-box - obrázek na pozadí se objeví pouze uvnitř obsahu.

Příklad použití:

tělo {background-clip: content-box;}.

Chrom a Safari vyžadují použití prefixu -webkit.

Atributy opacity a filtru

Atribut opacity umožňuje nastavit průhlednostbackground - Vlastnost CSS bude fungovat ve všech prohlížečích. Hodnota je nastavena od 0,0 do 1,0 včetně. Tímto způsobem můžete nastavit průhlednost pozadí CSS bez celočíselné hodnoty: namísto 0,3 stačí napsat .3:

.block {pozadí-obrázek: url (img.png); opacita: .3;}.

Chcete-li nastavit průhlednost pozadí, jejíž CSS je vhodné i pro IE pod devátou verzí, použijte atribut filtru:

.block {pozadí-obrázek: url (img.png); filtr: alfa (opacita = 30);}.

V tomto případě je hodnota opacity nastavena naod 0 do 100. Všimněte si, že atribut opacity se liší od nastavení průhlednosti s dědičností RGBA: při použití opacity se nejen transparentní pozadí stává, ale všechny prvky uvnitř bloku jsou také průhledné.

Mějte vždy přehled o statistikách využitíprohlížečů v CIS a ve všech ostatních zemích. Největším problémem pro všechny tvůrce rozvržení je stará verze aplikace IE, která vám neumožňují plně využít CSS3. Při vytváření rozvržení nezapomeňte použít speciální služby, které kontrolují, zda váš prohlížeč podporuje jakoukoli vlastnost CSS. Nemůžete-li nainstalovat starší verze prohlížečů, najděte službu, která bude testovat provoz webu v různých prohlížečích online.