Efekt průsvitnosti prvku je jasně viditelný na obrázku na pozadí a rozšířil se v různých operační systémy protože vypadá stylově a krásně. Ve webdesignu se také používá a dosahuje průsvitnosti vlastnosti neprůhlednosti nebo formát barev RGBA, který je nastaven pro pozadí.
vlastnost neprůhlednosti
Hlavním rysem této vlastnosti je, že hodnota průhlednosti ovlivňuje všechny podřízené prvky uvnitř, nejen pozadí. To znamená, že pozadí i text se stanou průsvitnými a nebude fungovat zvýšení úrovně průhlednosti přidáním . V tabulce. 1 ukazuje vzhled textu a pozadí s různými hodnotami krytí.
Příklad 1 ukazuje, jak vytvořit průsvitný rámeček pomocí neprůhlednosti.
Příklad 1: Pozadí na webové stránce
HTML5 CSS3 IE 9+ Cr Op Sa Fx
RGBA
Obvykle by podle návrhu mělo být průsvitné pouze pozadí prvku a text by měl být neprůhledný, aby byla zachována jeho čitelnost. Vlastnost opacity se sem nehodí, protože text uvnitř prvku bude také částečně průhledný. Nejlepší je použít formát RGBA, jehož součástí je alfa kanál, jinak řečeno hodnota průhlednosti. Hodnota je zapsána rgba, pak hodnoty červené, modré a zelené složky barvy jsou uvedeny v závorkách oddělených čárkami. Poslední je průhlednost, která se nastavuje od 0 do 1 (obr. 1), přičemž 0 znamená plnou průhlednost a 1 znamená neprůhlednost barvy.
Rýže. 1. Syntaxe použití rgba
Příklad 2 ukazuje použití formátu RGBA k vytvoření průsvitného pozadí.
Příklad 2: Poloprůhledné pozadí
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Výsledek tohoto příkladu je znázorněn na Obr. 2. Hodnota krytí pro pozadí je nastavena na 90 %.
Rýže. 2. Poloprůhledné pozadí a neprůhledný text
Vytvoření průhledného pozadí v HTML a CSS (neprůhlednost a efekty RGBA)
průsvitný efekt Prvek je jasně viditelný na obrázku na pozadí a rozšířil se v různých operačních systémech, protože vypadá stylově a krásně. Hlavní věcí je, aby pod průsvitnými bloky nebyl monochromatický vzor, ale obraz, v tomto případě se průhlednost stává patrnou.
Tohoto efektu je dosaženo různé způsoby, včetně staromódních technik, jako je použití obrázku PNG jako pozadí, vytvoření kostkovaného obrázku a použití vlastnosti opacity. Jakmile je však nutné vytvořit v bloku průsvitné pozadí, mají tyto metody nepříjemné nevýhody.
Zvažte průsvitnost textu a pozadí – jak je správně používat v designu webu:
Hlavním rysem této vlastnosti je, že hodnota průhlednosti ovlivňuje všechny podřízené prvky uvnitř, nejen pozadí. To znamená, že pozadí i text budou průsvitné. Úroveň průhlednosti můžete zvýšit změnou příkazu opacity z 0,1 na 1.
HTML 5 CSS 3 IE 9
Ve webdesignu se také využívá částečná průhlednost a dosahuje se jí prostřednictvím barevného formátu RGBA, který je nastaven pouze pro pozadí prvku.
V návrhu by mělo být obvykle průsvitné pouze pozadí prvku a text by měl být neprůhledný, aby byl čitelný. Vlastnost opacity se sem nehodí, protože text uvnitř prvku bude také částečně průhledný. Nejlepší je použít formát RGBA, jehož součástí je alfa kanál, jinak řečeno hodnota průhlednosti. Hodnota se zapisuje rgba, hodnoty červené, modré a zelené složky barvy jsou uvedeny v závorkách oddělených čárkami. Poslední je průhlednost, která se nastavuje od 0 do 1, přičemž 0 je plně průhledná a 1 je neprůhledná, což je syntaxe pro použití rgba.
Poloprůhledné pozadí HTML 5 CSS 3 IE 9
Hezký den, nadšenci do vývoje webu a také jeho nováčci. Pro ty, kteří nesledují trendy v oblasti IT, respektive webové módy, chci slavnostně oznámit, že tato publikace je na téma: „Jak udělat transparentní css blok nástroje“ právě včas pro vás. V aktuálním roce 2016 je totiž zavádění různých transparentních objektů do online služeb považováno za stylový krok.
Proto vám v tomto článku řeknu o všem stávající metody vytváření transparentnosti, počínaje předpotopními řešeními, zaměřím se na kompatibilitu řešení s prohlížeči a také dám konkrétní příklady programový kód. A teď do práce!
Metoda 1. Předpotopní
Kdy tam byli slabé počítače a "schopnost" není vyvinuta, vývojáři přišli na svůj vlastní způsob, jak vytvořit průhledné pozadí: použití průhledných pixelů střídavě s barevnými. Takto vytvořený blok vypadal při zmenšení jako šachovnice, ale v normální velikosti připomínal jakousi průhlednost.
Tato, dle mého názoru, „berlička“ samozřejmě pomáhá ve starších verzích prohlížečů, ve kterých moderní řešení nefungují. Za zmínku ale stojí kvalita zobrazení textu , vepsaný v takové , prudce klesá.
Metoda 2. Nezaměňovat
Ve vzácných případech řeší vývojáři problém se zavedením průsvitného obrázku vložením ... již hotového průsvitného obrázku! K tomu se používají obrázky uložené ve formátu PNG-24. Tento grafický formát umožňuje nastavit 256 úrovní průsvitnosti.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Tato metoda však není vhodná z několika důvodů:
- internet Explorer 6 s touto technologií nefunguje, musíte pro ni napsat kód skriptu;
- V css nemůžete změnit barvy pozadí;
- Pokud je funkce zobrazování obrázků v prohlížeči zakázána, zmizí.
Metoda 3. Propagováno
Nejběžnějším a nejznámějším způsobem, jak zprůhlednit blok, je vlastnost neprůhlednost.
Hodnota parametru se pohybuje v rozsahu , kde při 0 je objekt neviditelný a při 1 je plně zobrazen. Zde jsou však některé nepříjemné momenty.
Za prvé, všechny podřízené prvky zdědí průhlednost. A to znamená, že vepsaný text bude „prosvítat“ spolu s pozadím.
Za druhé, Internet Explorer opět ohrnuje nos a až do verze 8 s ním nefunguje neprůhlednost.
Chcete-li tento problém vyřešit, použijte filtr:alfa (Neprůhlednost=hodnota).
Zvažte příklad.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
Metoda 4. Moderní
Dnes profesionálové používají nástroj rgba (r, g, b, a).
Předtím jsem řekl, že RGB je jedním z oblíbených barevných modelů, kde R má na svědomí všechny odstíny červené, G – odstíny zelené a B – odstíny modré.
V případě parametru css je proměnná A zodpovědná za alfa kanál, který je zase zodpovědný za transparentnost.
Hlavní výhoda poslední způsob- alfa kanál neovlivňuje objekty uvnitř stylizovaného bloku.
rgba (r, g, b, a) je podporován, protože:
- 10 verzí Opery;
- Internet Explorer 9;
- Safari 3.2;
- 3 verze Firefoxu.
Chci poznamenat zajímavý fakt! Milovaný Internet Explorer 7 vyvolá chybu při kombinování vlastnosti barva pozadí s názvem barev (barva pozadí: zlatá). Proto byste měli používat pouze:
barva pozadí: rgba(255, 215, 0, 0,15)
A teď příklad.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
V našem obchodě najdete všechny druhy květin.
|
Všimněte si, že textový obsah blok je zcela viditelný (100% černý), zatímco pozadí je nastaveno na alfa kanál 0,88, tzn. 88 %.
Tento příspěvek skončil. Přihlaste se k odběru mého blogu a nezapomeňte pozvat své přátele. Hodně štěstí při učení webových jazyků! Ahoj!
Vlad Merževič
Částečná průhlednost při správném použití vypadá v designu webových stránek velmi působivě. Hlavní věc je, že pod průsvitnými bloky by neměl být jednobarevný vzor, ale obrázek, v tomto případě je průhlednost patrná. Tohoto efektu je dosaženo mnoha způsoby, a pokud si pamatujete vše, včetně staromódních metod, pak je to použití obrázku PNG jako pozadí, vytvoření kostkovaného obrázku a vlastnosti opacity. Jakmile je však nutné vytvořit v bloku průsvitné pozadí, mají tyto metody nepříjemnou nevýhodu. Udělám krátkou recenzi, aby bylo jasné, co je v sázce, i pro ty čtenáře, kteří nejsou obeznámeni s netradičními možnostmi pro vytvoření efektu průsvitu.
PNG jako pozadí
V grafický editor je předběžně připravena jednobarevná průsvitná kresba, která je uložena ve formátu PNG-24 (obr. 1). Charakteristickým rysem tohoto formátu je podpora 256 úrovní průhlednosti, nebo jednoduše řečeno, může zobrazovat průsvitné obrázky.
Rýže. 1. Obrázek pro vytvoření pozadí
Poté přidáme obrázek jako pozadí prostřednictvím vlastnosti pozadí, jak je znázorněno v příkladu 1.
Příklad 1: Použití průsvitného vzoru
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Výsledek tohoto příkladu je znázorněn na Obr. 3.
Rýže. 2. Použití tapety
Starší prohlížeč Internet Explorer 6 nefunguje s průsvitností v PNG-24, pokud z nějakého důvodu potřebujete tento prohlížeč podporovat, budete pro něj muset použít skripty.
Prezentovaná metoda má řadu omezení. Když tedy vypnete obrázky v prohlížeči, pozadí úplně zmizí. Kromě toho není tak snadné změnit barvu pozadí a hodnotu průhlednosti, k tomu budete muset obrázek znovu upravit.
kostkovaný obrázek
Tato metoda patří ke starodávným způsobům implementace translucence, kdy prohlížeče „nemohly nic“ a museli jste hledat řešení bez šablon. Trik spočívá ve vytvoření obrázku, který střídá průhledné a neprůhledné pixely (obrázek 3). Taková pravidelná struktura vytváří efekt průsvitnosti, v podstatě jej napodobuje.
Rýže. 3. Zvětšený kostkovaný vzor
Takto to nakonec vypadá (obr. 4).
Rýže. 4. Imitace průsvitnosti
Nevýhody této metody jsou srovnatelné s předchozí, mohou se vyskytovat i moaré vzory a dochází k degradaci textu.
vlastnost neprůhlednosti
Vlastnost CSS 3 opacity nastavuje hodnotu průhlednosti a pohybuje se od 0 do 1, kde nula je úplná průhlednost prvku a jedna je naopak neprůhlednost. Vlastnost opacity má vlastnost – průhlednost je distribuována všem podřízeným prvkům a ty nemohou překročit hodnotu průhlednosti svého rodiče. Ukázalo se, že na průsvitném pozadí nemůže být žádný neprůhledný text (příklad 2).
Příklad 2: Použití neprůhlednosti
XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx
Výsledek příkladu je na Obr. 5.
Rýže. 5. Průsvitnost textu a pozadí
V Internet Exploreru až do verze 8.0 včetně neprůhlednost nefunguje, takže se pro ni používá vlastnost filtru specifická pro prohlížeč. Přirozeně to má za následek neplatný kód CSS.
RGBA
Moderní přístup je mnohem jednodušší a vizuálnější než výše uvedené metody a spočívá v použití formátu RGBA pro barvu a pozadí. První tři písmena jsou mnohým známá a znamenají červenou, zelenou, modrou (červená, zelená, modrá), poslední symbolizuje alfa kanál a nastavuje průhlednost prvku. Formát záznamu je tento.
barva pozadí: rgba(r, g, b, a);
V závorkách je místo písmen uvedena hodnota barevné složky, lze ji zobrazit v libovolném grafickém editoru, poslední hodnota nastavuje průhlednost a odpovídá hodnotě vlastnosti opacity.
Ne všechny prohlížeče tento formát podporují: Internet Explorer od verze 9, Opera od verze 10, Firefox od verze 3, Safari od verze 3.2. Ale obecně, moderní prohlížeče správně zobrazit průhlednost. U starších verzí IE můžete samostatně určit barvu v jejím obvyklém formátu, přičemž samozřejmě nebude chybět průhlednost. Nebo znovu použijte vlastnost filter, ale pak se musíte smířit s tím, že průhlednost ovlivní i text (příklad 3). Abychom vyhověli platný kód CSS, použil jsem podmíněné komentáře.
Příklad 3: Použití RGBA
HTML5 CSS3 IE Cr Op Sa Fx
Výsledek příkladu je vidět na Obr. 6.
Rýže. 6. Poloprůhledné pozadí s neprůhledným textem
Porovnejte obrázek s předchozím, písmena jsou jasnější a jasnější.
V internetový prohlížeč Průzkumník 7 našel chybu při kombinování barvy pozadí s různými hodnotami. Pokud například nastavíte barvu pozadí na červenou, jak je uvedeno níže, pozadí v IE7 se nezobrazí vůbec.
Div ( barva pozadí: červená; /* Nelze použít v IE7 */ barva pozadí: rgba(255, 0, 0, 0,5); )
To je vyřešeno nahrazením vlastnosti background-color za background .
Div ( background: red; /* A funguje to */ background: rgba(255, 0, 0, 0.5); ) Existuje však jedno upozornění. Validátor CSS „přísahá“ na pozadí, pokud jej nastavíte formát RGBA. Ale zároveň to správně platí pro barvu pozadí . Obecně platí, že jako vždy si musíte vybrat mezi prohlížeči a platností.
Popis
Určuje barvu pozadí prvku. Přestože tato vlastnost nedědí vlastnosti svého rodiče, protože počáteční hodnota je nastavena na průhlednou, barvu pozadí podřízené prvky odpovídá barvě pozadí nadřazeného prvku.
Syntax
barva pozadí:<цвет>| transparentní | zdědit
Hodnoty
transparentní Nastaví průhledné pozadí. inherit Zdědí hodnotu rodiče.HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
V tento příklad pro prvky webové stránky tři různé cesty nastavení barvy pozadí. Výsledek příkladu je na Obr. jeden.
Rýže. 1. Použijte barvu pozadí
Objektový model
document.getElementById("elementID ").style.backgroundColor
Prohlížeče
Internet Explorer do verze 7.0 nepodporuje dědičnou hodnotu.