Vytvořte průhledné 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í není mít pod průsvitnými bloky monochromatický vzor, ​​ale obraz, v tomto případě je průhlednost patrná.

Tohoto efektu je dosaženo různými způsoby, včetně staromódních technik, jako je použití obrázku PNG jako pozadí, vytvoření kostkovaného obrázku a vlastnosti opacity. Ale jakmile je nutné vytvořit průsvitné pozadí v bloku, tyto metody mají 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 děti 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é uplatňuje čá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ávrzích by obvykle mělo být průhledné pouze pozadí prvku a text by měl být neprůhledný, aby byla zachována čitelnost. Vlastnost opacity je zde nevhodná, 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, nebo jinými slovy hodnotu průhlednosti. Hodnota se zapisuje rgba, hodnoty červené, modré a zelené barevné složky 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ůhlednost a 1 je neprůhledná barva pro syntaxi rgba.

Průhledné pozadí HTML 5 CSS 3 IE 9

Neprůhlednost pozadí je nastavena na 90 % – Poloprůhledné pozadí a neprůhledný text.

Vlastnost opacity CSS se používá k řízení krytí prvků stránky. Podle specifikace se vztahuje na jakýkoli typ uzlu a je podporován ve všech moderních prohlížečích. S jeho pomocí můžete vytvořit zajímavý design nebo implementovat pohodlnou interaktivní interakci s uživatelem.

Možné hodnoty

Syntaxe vlastnosti opacity v css vypadá takto:

Selektor (neprůhlednost: 1;) Selektor (neprůhlednost: 0;) Selektor (neprůhlednost: 0,4;)

Jako vstup jsou přijímány číselné hodnoty v rozsahu od 0 do 1. Parametr může být zlomek jedné, zatímco tečka se používá jako oddělovač pro celé číslo a zlomkové části v CSS.

Prvek s nulovou průhledností se stane neviditelným, ale stále zaujímá své místo na stránce a zachovává si možnost interakce s uživatelem.

Pokud je hodnota vlastnosti jiná než nula, pak se skutečná průhlednost vypočítá jako procento nějaké horní hranice. Normálně neprůhlednost: 1 určuje plnou neprůhlednost prvku.

Transparentnost podřízených uzlů

Pokud však prvek má nadřazeného prvku, jehož průhlednost se od jednoho liší, výpočet se změní. Potomek nemůže být „méně průhledný“ než kterýkoli z jeho předků. Hodnota neprůhlednosti nadřazeného bloku se stává horním limitem neprůhlednosti potomka.

Rodič (neprůhlednost: 0,7;) podřízený (neprůhlednost: 1;)

V této situaci bude podřízený prvek z 30 % průhledný, i když je neprůhlednost nastavena na hodnotu jedna.

Příklady použití

Příklad 1. Průsvitnost. Je nutné, aby pod cílovým prvkem bylo viditelné hlavní pozadí bloku.

Cíl (pozadí: černé; neprůhlednost: 0,5;)

Zprůhlední se nejen pozadí cílového bloku, ale i text.

Příklad 2. Dynamická kontrola průhlednosti. Hodnota vlastnosti CSS opacity cílového bloku se změní, když na něj najedete myší.

Cíl (neprůhlednost: 0,2;) .cíl: hover (neprůhlednost: 1;)

Dynamická průhlednost

Poslední příklad ukazuje, že průhledné prvky nadále reagují na události stránky, jako je například přechod kurzoru. To vám umožňuje používat javascript k ovládání vlastnosti neprůhlednosti CSS a také používat přechodové a animační mechanismy pro plynulou změnu režimu zobrazení.

Chcete-li získat přístup k průhlednosti ze skriptu, musíte odkazovat na objekt stylu konkrétního prvku.

// získání aktuální opacity var opacity = element.style.opacity; // nastavení nové hodnoty element.style.opacity = 0.4;

Zeslabení bloku lze implementovat pomocí vlastnosti přechodového CSS:

Prvek (neprůhlednost: 0,1; přechod: neprůhlednost 1000 ms;) prvek: hover (neprůhlednost: 0,8; přechod: neprůhlednost 2000 ms;)

Nyní uzel prvku změní krytí z 10 na 80 % při najetí myší během jedné sekundy, a když kurzor opustí, během dvou sekund zmizí na původní hodnotu.

Vlastnost opacity CSS v kombinaci s mechanismem přechodu umožňuje vytvářet nádherné efekty.

Alfa kanál místo neprůhlednosti

Hlavní jemnosti mechanismu neprůhlednosti v CSS:

• jeho účinek se vztahuje nejen na pozadí bloku, ale také na jeho textový obsah, který je lepší ponechat jasný;
• podřízené prvky nemohou být méně průhledné než rodičovské prvky.

Pokud tyto efekty znesnadňují život návrháři rozvržení, místo neprůhlednosti byste měli jednoduše použít průhledné pozadí s uvedením jeho hodnoty ve formátu RGBA nebo HSLA.

Transparentnost v CSS je v poslední době docela trendy technika a způsobuje potíže při implementaci napříč prohlížeči. Až dosud neexistuje žádná univerzální metoda pro implementaci transparentnosti ve všech prohlížečích. V poslední době se však situace výrazně zlepšila.

Tento článek se podrobně zabývá existujícími přístupy a poskytuje příklady kódu a vysvětlení, které vám pomohou dosáhnout stejného výsledku ve všech prohlížečích s minimálním úsilím.

Dalším bodem, který stojí za zmínku, je, že ačkoli transparentnost existuje již několik let, nikdy nebyla součástí standardu CSS. Toto je nestandardní vlastnost a měla by být součástí specifikace CSS3.

Starý přístup

Ve starších verzích Firefoxu a Safari musíte vlastnost použít takto:

#myElement (-khtml-opacity: 0,5; -moz-opacity: 0,5;)

Vlastnost -khtml-opacity byla použita ve starších verzích prohlížečů webkit. Tato vlastnost je zastaralá a již není potřeba, pokud si nejste jisti, že značná část návštěvnosti vašich stránek pochází od návštěvníků používajících Safari 1.x, což je samozřejmě nepravděpodobné.

Další řádek používá vlastnost -moz-opacity, která fungovala na velmi raných verzích enginu Mozilla. Firefox pro něj ukončil podporu ve verzi 0.9.

Transparentnost CSS ve Firefoxu, Safari, Chrome a Opeře

Pro většinu moderních prohlížečů postačuje následující vlastnost:

#myElement (neprůhlednost: 0,7;)

Ve výše uvedeném příkladu je prvek nastaven na hodnotu krytí 70 % (30 % krytí). To znamená, že pokud nastavíme hodnotu na jedna, pak bude prvek neprůhledný, a proto nastavením této hodnoty na nulu bude neviditelný.

Vlastnost opacity zpracovává 2 desetinná místa. To znamená, že hodnota ".01" se bude lišit od hodnoty ".02", i když to není příliš patrné.

Transparentnost CSS pro Internet Explorer

Jako obvykle není Internet Explorer přátelský k ostatním prohlížečům. Kromě toho máme nyní tři verze tohoto prohlížeče v poměrně rozšířeném používání, přičemž nastavení průhlednosti v každé z nich je jiné a někdy vyžaduje další úsilí k získání pozitivního výsledku.

#myElement (filtr: alfa (neprůhlednost = 40);)

Tento příklad používá vlastnost filter, která funguje ve verzích 6-8, ale pro verze 6 a 7 existuje jedno omezení: vlastnost hasLayout prvku musí být nastavena na hodnotu true. Tato vlastnost je přítomná pouze v IE a více se o ní dočtete například na Habré.

Dalším způsobem, jak nastavit průhlednost pomocí CSS v IE8, je použít následující přístup (všimněte si komentářů):

#myElement (filtr: progid: DXImageTransform.Microsoft.Alpha (neprůhlednost = 40); / * funguje v IE6, IE7 a IE8 * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (neprůhlednost = 40)"; / * Pouze IE8 * /)

První řádek bude fungovat ve všech aktuálně používaných verzích, druhý pouze v IE8. Všimněte si, že druhý řádek používá předponu -ms- a hodnota je v uvozovkách.

Nastavení a změna průhlednosti CSS pomocí JavaScriptu nebo jQuery

K nastavení průhlednosti můžete použít následující kód:

Document.getElementById ("myElement"). Style.opacity = ".4"; // pro většinu prohlížečů document.getElementById ("myElement"). style.filter = "alpha (opacity = 40)"; // pro IE

V tomto případě je samozřejmě mnohem jednodušší používat jQuery, navíc bude fungovat ve všech prohlížečích:

$ ("# myElement"). css ((neprůhlednost: 0,4)); // funguje ve všech prohlížečích

Tuto vlastnost můžete animovat:

$ ("# myElement"). animate ((opacity: .4), 1000, function () (// Animace dokončena; tento kód funguje ve všech prohlížečích.));

funkce RGBA

Plánuje se podpora alfa kanálu v CSS3 pomocí funkce rgba. Tato funkce funguje ve Firefoxu 3+, Opeře 10.1+, Chrome 2+, Safari 3.1+. Používá se takto:

#rgba (pozadí: rgba (98, 135, 167, .4);)

V tomto případě poslední parametr udává úroveň krytí.

funkce HSLA

Podobně jako u předchozí funkce i CSS3 umožňuje nastavit poloprůhlednou barvu pomocí funkce HSLA, jejíž parametry jsou Hue, Saturation, Lightness a Alpha channel (Alpha).

#hsla (pozadí: hsla (207, 38 %, 47 %, 0,4);)

Důležitým bodem při použití funkcí rgba a hsla je to, že nastavení opacity se nepoužije na podřízené prvky, zatímco vlastnost opacity je zděděna.

Vlastnost opacity CSS je zodpovědná za průhlednost prvků (obrázků, textu, bloků) v html.

Syntaxe neprůhlednosti CSS

Kde hodnota může nabývat skutečných hodnot v rozsahu od 0,0 do 1,0. Hodnota 1,0 znamená žádnou průhlednost (výchozí).

Příklad #1. Průhledný obrázek v html

První obrázek se zobrazí bez průhlednosti, druhý s průhledností 0,5

Průsvitnost prvku

Vytvoření poloprůhledného obrázku při vznášení!

Zdroj ke stažení demo

Děkuji za pozornost!

Další článek
Jak vytvořit rolovací blok div?

orem Ipsum je prostě fiktivní text tiskařského a sazebního průmyslu. Lorem Ipsum je standardním fiktivním textem v tomto odvětví již od 16. století, kdy neznámá tiskárna vzala galéru písma a zakódovala ji, aby vytvořila vzorník písma. Přežila nejen pět století, ale také skok do elektronické sazby. Zpopularizován byl v 60. letech 20. století vydáním listů Letraset obsahujících pasáže Lorem Ipsum a v poslední době se softwarem pro počítačové publikování, jako je Aldus PageMaker včetně verzí Lorem Ipsum.
Je již dávno potvrzeným faktem, že čtenář bude při pohledu na její rozložení rozptylován čitelným obsahem stránky. Smyslem použití Lorem Ipsum je, že má víceméně normální rozložení písmen, na rozdíl od použití „Obsah zde, obsah zde“, takže to vypadá jako čitelná angličtina. Mnoho balíčků DTP a editorů webových stránek nyní používá Lorem Ipsum jako svůj výchozí modelový text a hledání „lorem ipsum“ odhalí mnoho webových stránek, které jsou stále ještě v plenkách. Během let se vyvíjely různé verze, někdy náhodou, někdy záměrně (vstříknutý humor a podobně).

Takže dnes budeme mluvit o průhlednost v html stránky. Pravděpodobně jste se již setkali s průhlednými vyskakovacími bloky, ať už jde o fotogalerii nebo přihlašovací formuláře na některém oblíbeném webu. Transparentnost v html má mnoho využití. Jak se to tedy dělá a kde se to dá použít?

Pro začátek si uvědomme, že náš dokument nemá pouze jednu rovinu monitoru – je obecně řečeno trojrozměrný, jak jsem zmínil v článku „Z-index“. V souladu s tím i zcela průhledná vrstva, pokud se objeví v horní části zásobníku, bude blokovat přístup ke zbytku prvků. Toto je jedno z hlavních použití průhledných krabic. I když se většinou používá efekt stínování, úplně průhledná vrstva bude fungovat stejně. Funguje tedy například spousta oblíbených fotogalerií, je uspořádána stínovaná vrstva, ve které se zobrazují fotografie, a ovládací prvky k nim. Zbytek stránky je „pokryt“ (polo)průhlednou vrstvou, která blokuje přístup ke všem ostatním prvkům na stránce. Tito. nebudete moci opustit stránku kliknutím na jakýkoli odkaz na ni - veškerý text je pokryt podložkou. Pro návrat do těla webu obvykle poskytují ovládací prvky pro uzavření galerie, přihlašovací formulář atd. Ovládání zobrazení / skrytí průhledných bloků pomocí javascriptu. Tady k tomu bohužel neexistuje žádná alternativa. Bez jeho použití uživatel buď průhledný blok vůbec neuvidí, nebo jej nebude moci zavřít, aniž by opustil aktuální stránku. Všimněte si, že k tomu slouží vlastnosti viditelnosti nebo zobrazení.

Jak je tedy transparentnost vlastně uspořádána v html? Nastavení průhlednosti prvků obecně není součástí specifikace CSS, takže k jeho vytvoření musíte použít několik pokynů najednou. Některé prohlížeče (tj.) budou pracovat s jednou možností, jiné s jinou. To znamená, že používá vestavěnou funkci filtru, jiné prohlížeče používají vlastnost "opacity", která se pohybuje od 0 (plně průhledný objekt) do 1 (plně neprůhledný). Například v případě 30% průhlednosti napište " krytí: 0,30; filtr: alfa (neprůhlednost = 30);". Vlastnosti, jak můžete vidět z příkladu, jsou podobné - pouze v prvním případě je použito číslo od 0 do 1, ve druhém procentuální údaj. Příklad takového bloku:

<div styl = "pozice: absolutní; nahoře: 0; vlevo: 0; barva pozadí: rgb (18, 114, 214); šířka: 100 %; id = "VideoFrame">

Příklad používá blok zobrazení videa, který se aktivuje kliknutím na miniaturu videa. Bloku není dána výška, protože se může lišit v závislosti na velikosti obrazovky a obsahu stránky. V této souvislosti se počítá dynamicky při otevření videa. Příklad použití této techniky lze vidět na hlavní stránce webu ruscircus.ru, na kterém jsem kdysi pracoval.

Toto je celé tajemství transparentnosti v html. K dosažení efektu průhlednosti používáme z-index a neprůhlednost. A pro to najdete mnoho aplikací - vše je zde omezeno pouze vaší představivostí.

08.02.2013 Odpovím na otázky položené v komentáři, a to jak vyrobit neprůhledný blok na průhledném bloku. Zde je vše jednoduché, ne nadarmo jsem v materiálu uvedl odkaz na materiál o z-indexu, je potřeba vytvořit další blok, s větším z-indexem, než je ten průhledný. Nyní, za pár minut, jsem načrtl příklad. Bloky:

<div styl = "pozice: absolutní; nahoře: 0; vlevo: 0; barva pozadí: rgb (18, 114, 214); šířka: 100 %; výška: 100 %; krytí: 0,30; filtr: alfa (neprůhlednost = 30); viditelnost: skrytý; z-index: 1; " id = "VideoFrame"> <div id = styl "VideoFrame2" = "pozice: absolutní; nahoře: 25 %; vlevo: 25 %; barva pozadí: bílá; šířka: 50 %; výška: 50 %; neprůhlednost: 0,99; filtr: alfa (neprůhlednost = 99); viditelnost: skrytý; z-index: 2; " onclick = "javascript: HideForm ();" > Zde napíšeme text</ div>

A funkce javascriptu

< script type= "text/javascript" >function ShowForm () (document.getElementById ("VideoFrame") .style .visibility = "visible"; document.getElementById ("VideoFrame2") .style .visibility = "visible";) funkce HideForm () (document.getElementById (" VideoFrame ") .style .visibility =" skryté "; document.getElementById (" VideoFrame2 ") .style .visibility =" skryté ";)

První funkce zobrazuje průhledný blok (spolu s neprůhledným textovým blokem) - lze jej připojit k tlačítku. odkaz atd. Druhá funkce, kterou mám, je svázána s kliknutím myši na blok s textem - skryje průhledný blok.

Snad objasněno, jak to funguje. No, pokud ne, ptejte se.