CSS průhlednost pozadí. Průhledné pozadí nebo text s CSS

S nástupem CSS3 web designérů pracovat v mnoha ohledech se stala jednodušší a logičtější: po tom všem, si nyní můžete skutečně flexibilně přizpůsobit jakýkoli předmět, méně často se uchylovat k JavaScriptu. Řekněme, že je třeba nastavit průhlednost pozadí - CSS okamžitě nabízí několik možností.

Pozadí definována souborem atributů (pozadí-obrázku, pozadí-poloze , pozadí velikosti, pozadí-repeat, pozadí, připojovací, pozadí-původu, pozadí-klip, background-color), z nichž každá může být přiřazeny samostatně nebo v kombinaci v atributu pozadí. Podívejme se každý z nich podrobněji.

Atribut background-color

CSS, barvu pozadí lze nastavit v několika způsoby: pomocí hexadecimální kód, název barvy nebo RGB vstupu. V CSS3 bylo možno použít volbu RGB, nahrávání s RGBA místo.

Hex barevný kód je zaznamenán ve vlastnosti po mřížce: background-color: # FFDAB9. Pokud postavy v této položce jsou stejné dvojice, kód je obvykle malý řez: # ccff00 může být zapsán jako # CF0:

body {background-color: # cf0 ;}.

Jméno znamená, že i v těch exotických barvách. Například, kromě standardní červené a bílé můžete použít NavajoWhite (#FFDEAD) nebo Honeydew2 (# E0EEE0):

body {background-color: fialová; }.

Druhá možnost je RGB nebo vstup RGBA umožňuje určit nejen barvu, ale i transparentnost CSS pozadí, ale tato metoda funguje pouze ve verzích IE starších než 9. Ostatní prohlížeče rozpoznat normální verzi s průhledností. Podle W3C standardů je výhodné použít ještě RGBA namísto obvyklejší RGB.

Poslední hodnota v RGBA pozadí a nastaví opacity od 0 (průhledná) do 1 (neprůhledná).

Tam jsou některé neobvyklé hodnoty. 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 background-image

Největší verze cross-browser průhledné pozadí - to je použití obrazu. V CSS3, můžete nastavit i více snímků, to se provádí pomocí čárkou. příklad:

{Background-obraz těla: url (bg1.png), url (bg2.png)}.

Tento způsob podpory i IE8. Několik obrázků na pozadí kaučuku použitého v rozvržení. Důležité je, nezapomeňte použít libovolný obrázek a nastavit barvu pozadí v CSS, protože uživatelé mohou jednoduše nahrát obrázek.

Atribut background-position

Používáte-li snímek nastavit pozadí jednotky v CSS umožňuje umístit obraz kdekoliv na obrazovce. Ve výchozím nastavení je obraz se nachází v levém horním rohu. Atribut se buď slovní pokyny (nahoře, dole, vlevo, vpravo), číselné (úroky, pixely a dalších jednotek). V tomto případě je nutné zadat dvě hodnoty, horizontální a vertikální:

body {background-poloha: přímo centrum ;} - v tomto příkladu je vzor se nachází na pravé straně stránky, horní a spodní části obrazu vzdálenosti stejné.

Atribut background-size

Někdy je nutné natáhnout CSS pozadí nebo snížit jeho velikost. Chcete-li to provést, použijte atribut pozadí velikosti a velikosti pozadí lze nastavit v pixelech nebo v procentech, a všechny ostatní jednotky.

S tímto atributem, tam jsou některé problémy: pro správné zobrazení pozadí v dřívějších verzích předpon prohlížeče, které mají být použity. Samozřejmě, že současná verze plně podporuje tento atribut a potřeba specifických vlastností zmizel.

Atribut background-attachment

Tento atribut určuje chování obrázků na pozadí, zatímco posouvání. Takže to může trvat 3 hodnot (ne včetně zdědit úhrnu za všechny atributy popisované v tomto článku):

• pevná - dělá obrázek na pozadí pevně;
• rolování - pozadí svitky se zbytkem prvků;
• Místní - obrázek na pozadí se posune v případě posouvání má obsah. Dosavadní stav techniky, který přesahuje obsah rámu je pevná.

Příklad použití:

body {background-attachment pevné}.

V současné době, Firefox nepodporuje poslední vlastnost (lokální).

Atribut background-původu

Tento atribut je zodpovědný za polohovacího prvku. Rané prohlížečů vyžadují použití předpon. Samotná nemovitost má tři parametry:

• padding-box je umístěn vzhledem k okraji vzorku, přičemž s ohledem na tloušťku rámu;
• border-box vlastnosti odlišné od předchozího tím, že hraniční čára může být úplně nebo částečně překrývají vzor;
• Obsah-box umístění obrazu pryavyazyvaya jeho obsah.

Zadáte-li více hodnot, pak prohlížeče mohou reagovat vlastním způsobem: Firefox a Opera vnímat pouze první možnost.

Atribut background-repeat

Zpravidla, pokud je zadán obrázek na pozadí, to se musí opakovat vodorovně nebo svisle. Za tímto účelem a použit atribut background-repeat. Proto blok pozadí, CSS, který obsahuje takové vlastnosti může mít jednu z několika parametrech:

• no-repeat - zobrazí obraz na stránce v jednom provedení;
• opakuji - pozadí se opakuje v x a y;
• repeat-x - pouze horizontálně;
• repeat-y - pouze ve svislém směru;
• space - na pozadí se opakuje, ale pokud prostor je možné vyplnit mezi obrázky se objeví prázdný;
• kolo - obraz je zmenšen, pokud nevyplňuje celou plochu celých snímků.

Příklad atributů:

body {background-repeat: NO- Opakované} - podobně jako pozadí-repeat: repeat-y.

V CSS3 může stanovit hodnoty pro více snímků při výčtu parametrů oddělené čárkou.

Atribut background-klip

Tento atribut definuje chování pozadí pod hranicemi (např., V případě, že tečkované rámečky):

• padding-box - pozadí zobrazena ve vnitřku bloku;
• border-box - obraz spadá do rámce;
• content-box - obrázek na pozadí se objeví pouze v rámci obsahu.

Příklad použití:

body {background-clip: obsahového krabice;}.

Chrom a Safari vyžadují -webkit- prefix.

atributy krytí a filtr

atribut neprůhlednost umožňuje nastavit průhlednost pozadí - vlastnost CSS bude fungovat ve všech prohlížečích. Tato hodnota je nastavena v rozsahu od 0,0 do 1,0 včetně. V tomto případě můžete nastavit průhlednost pozadí CSS ne celé číslo, místo 0,3 dost psát .3:

.block {background-image: url ( img.PNG); Neprůhlednost: 0,3;}.

Chcete-li nastavit pozadí krytí, CSS je vhodný i pro IE pod deváté verze, použijte atribut filtru:

.block {background-image: url ( img.PNG); Filtr: alfa (opacity = 30)}.

V tomto případě je hodnota neprůhlednost je nastavena mezi 0 a 100. Všimněte si, že neprůhlednost přisuzují různá nastavení průhlednosti prostřednictvím dědičnosti RGBA: Při použití krytí zřejmé nejen zázemí, ale také všechny prvky uvnitř přístroje.

Vždy sledovat vaše statistiky využití pro prohlížeče CIS a všech ostatních zemí. Největším problémem všech DTP - starší verze IE, které nedovolují použít v plném rozsahu CSS3. V rozložení nezapomeňte použít speciální služby, které kontrolují, zda váš prohlížeč podporuje všechny vlastnosti CSS. Pokud nemůžete nainstalovat starší verze prohlížečů, najít službu, která bude kontrolovat, jestli web práci v různých prohlížečích online.