Existují tři způsoby, jak změnit průhlednost prvku v CSS:
pomocí vlastnosti opacity,
pomocí funkce rgba()
pomocí funkce hsla().
1. Vlastnost neprůhlednosti
Vlastnost opacity umožňuje zčásti nebo úplně zprůhlednit jakýkoli prvek webové stránky. Tato vlastnost mění průhlednost prvků, pro které obrázek na pozadí(obrázek) nebo je pozadí nastaveno pomocí barvy nebo přechodu. Pokud prvek, který má použitou vlastnost opacity, obsahuje další prvky, změní se také jejich průhlednost.
Vlastnost opacity přijímá hodnoty od 0 (plně průhledné) do 1 (neprůhledné), například:
H1 (barva: #CD6829;) div ( pozadí: #CDD6DB; neprůhlednost: 0,3; ) 
Rýže. 1. Průhlednost prvků pomocí neprůhlednosti
2. funkce rgba().
Barevný model RGBA vytváří barevný tón smícháním v požadovaných poměrech Červené, zelená A modrý květiny a alfa kanál (alfa) odpovídá za stupeň průhlednosti barev. Na rozdíl od vlastnosti opacity u bloku obsahujícího jiné prvky funkce rgba() změní krytí pouze bloku.
Rýže. 2. RGB barevný model h1 (barva: #CD6829;) div (pozadí: rgba(205, 214, 219, 0,3);) 
Rýže. 3. Průhlednost prvků pomocí funkce rgba(). 3. Funkce hsla()
Funkce hsla(), jejíž parametry znamenají tón (odstín), nasycení, jas A alfa kanál (alfa), také umožňuje nastavit průsvitnou barvu.
Barevné odstíny se zadávají v procentech pomocí odpovídající hodnoty z barevného kruhu. Samotný kruh je rozdělen do sektorů, na jejichž hranicích jsou základní barvy:
0/360° - červená
60° - žlutá
120° - zelená barva
180° - modrá barva
240° - modrá barva
270° - fialová barva
300° - fialová barva.
Chcete-li získat černou, musíte nastavit hodnoty odstínu, sytosti a jasu na nulu - hsla(0, 0 %, 0 %, 1) . Bílá barva se získá při 100% hodnotě jasu hsla(0, 0 %, 100 %, 1) a šedá barva— při nulové hodnotě saturace hsla(0, 0 %, 50 %, 1) .
K vytvoření transparentního efektu v CSS se používá vlastnost opacity.
IE8 a starší verze podporují alternativní vlastnost - filter:alpha(opacity=x), kde "x" může být hodnota od 0 do 100 než menší hodnotu, tím průhlednější bude prvek.
Všechny ostatní prohlížeče podporují standardní neprůhlednost vlastnosti CSS, která může mít jako hodnotu číslo od 0,0 do 1,0, čím nižší je hodnota, tím transparentnější bude prvek:
Snaž se "
Průhlednost při vznášení
Pseudo-class:hover umožňuje změnu vzhled prvky, když na ně najedete kurzorem myši. Tuto funkci použijeme k tomu, aby obrázek ztratil svou průhlednost, když na něj najedete myší:
Snaž se "
Průhlednost pozadí
Existují dva možné způsoby zprůhlednit prvek: vlastnost opacity popsaná výše a specifikující barvu pozadí ve formátu RGBA.
Model reprezentace barev RGB již možná znáte. RGB (Red, Green, Blue - červená, zelená, modrá) je barevný systém, který určuje odstín smícháním červené, zelené a modré. Chcete-li například nastavit barvu textu na žlutou, můžete použít kteroukoli z následujících deklarací:
Barva: rgb(255,255,0); barva: rgb(100%,100%,0);
Barvy určené pomocí RGB se budou lišit od hexadecimálních hodnot, které jsme používali dříve, v tom, že umožňují použití kanálu průhlednosti alfa. To znamená, že přes pozadí prvku s průhledností alfa bude vidět to, co se nachází pod ním.
Oznámení RGBA barvy syntaxe podobná standardním pravidlům RGB. Budeme však také muset deklarovat hodnotu jako RGBA (místo RGB) a zadat další desetinnou hodnotu průhlednosti po hodnotě barvy mezi 0,0 (plně průhledná) a 1 (plně neprůhledná).
Barva: rgba(255,255,0,0,5); barva: rgba (100 %, 100 %, 0,0,5);
Rozdíl mezi vlastností opacity a vlastností RGBA je v tom, že vlastnost opacity aplikuje průhlednost na celý prvek, což znamená, že celý obsah prvku se stane průhledným. A RGBA umožňuje nastavit průhlednost jednotlivých částí prvku (například pouze textu nebo pozadí):
Body ( background-image: url(img.jpg); ) .prim1 ( width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px full black; font-weight: bold; opacity: 0.5; filter : alpha(opacity=70); /*pro IE8 a starší*/ text-align: center; ) .prim2 ( width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid černá; tloušťka písma: tučné; zarovnání textu: na střed; ) Zkuste »
Poznámka: Hodnoty RGBA nejsou podporovány v IE8 a starších verzích. Chcete-li deklarovat záložní barvu pro starší prohlížeče, které nepodporují hodnoty barev alfa, měli byste ji zadat jako první před hodnotou RGBA: background: rgb(255,255,0); pozadí: rgba(255,255,0,0,5);
Vlad Merževič
Účinek 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á průsvitnost a dosahuje se jí prostřednictvím vlastnosti opacity nebo formátu barev RGBA, který je nastaven pro pozadí.
Přechodový blok
Vytvořte blok zobrazený na obr. 1. Blok obsahuje průsvitný rámeček s přechodem s pozadím s přechodem pod nadpisem a malým ukazatelem. Pozadí na stránce je uvedeno pouze pro přehlednost efektu průsvitnosti, můžete označit libovolný vlastní obrázek. Minimální výška bloku je 100px.
Jak udělat vrstvu poloprůhlednou?
Pro změnu stupně průhlednosti prvku použijte vlastnost opacity style s hodnotou od 0 do 1, kde 0 odpovídá plné průhlednosti a 1 naopak neprůhlednosti objektu. V prohlížeči internet Explorer Tato vlastnost nefunguje, takže pro ni musíte použít filtr, vlastnost, která není součástí specifikace CSS. Příklad 1 ukazuje, jak nastavit průhlednost vrstvy pro všechny prohlížeče.
Průsvitné pozadí
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 není monochromatický design, ale obraz, v tomto případě je průhlednost patrná. Tohoto efektu je dosaženo různé způsoby a pokud si pamatujete vše, včetně staromódních metod, je to použití obrázku PNG jako pozadí, vytvoření kostkovaného obrázku a vlastnosti opacity. Jakmile ale vznikne potřeba udělat v bloku průsvitné pozadí, mají tyto metody nepříjemnou nevýhodu. Udělám krátkou recenzi, aby bylo jasné, o čem mluvíme, a také pro ty čtenáře, kteří nejsou obeznámeni s netradičními možnostmi vytvoření průsvitného efektu.
Jak nastavit tabulku, aby byla průsvitná, ale některé buňky nejsou?
Pro změnu průhlednosti prvku poskytuje CSS3 vlastnost opacity, jejíž hodnota se může pohybovat od 0 do 1. Nula odpovídá plné průhlednosti prvku a jedna naopak neprůhlednosti. Moderní prohlížeče s touto vlastností pracují zcela správně s výjimkou internetový prohlížeč Explorer, takže pro něj musíte použít speciální vlastnost filtru s hodnotou alpha(Opacity=X) , kde X se může lišit od 0 do 100.
Vlastnictví Neprůhlednost CSS zodpovídá za průhlednost prvků (obrázků, textu, bloků) v html.
Syntaxe neprůhlednosti CSS
neprůhlednost: hodnota;
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říklady: jako průhlednost v html
Příklad č. 1. Průhledný obrázek v html
První obrázek se zobrazí bez průhlednosti, druhý s průhledností 0,5
Příklad č. 2. Efekty s průhledností v html
Ve výchozím nastavení je blok částečně průhledný. Když najedete myší na blok, rozsvítí se. Takové efekty se často používají v designu webových stránek.
Stránka se převede na následující
Příklad č. 3. Transparentní blok na obrázku v html
Níže je uveden příklad poloprůhledného bloku, který částečně zakryl obraz. Blok záměrně zcela nezakrývá obrázek, aby ukázal, jak vypadá na prázdném pozadí.
Stránka se převede na následující
Transparentnost v CSS je v poslední době poměrně trendy technika, která způsobuje potíže při implementaci napříč prohlížeči. Univerzální metoda, která by umožnila implementovat transparentnost pro všechny prohlížeče, stále neexistuje. V poslední době se však situace výrazně zlepšila.
Tento článek poskytuje podrobný pohled na existující přístupy a také 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.
Jedna věc, která stojí za zmínku, je, že ačkoli transparentnost existuje již několik let, nikdy nebyla součástí standardu CSS. Jedná se o nestandardní vlastnost, která by měla být součástí specifikace CSS3.
Starý přístup
Ve starém verze Firefoxu a Safari musí vlastnost použít takto:
#myElement ( -khtml-opacity: .5; -moz-opacity: 0.5; )
Vlastnost -khtml-opacity byla použita ve starších verzích prohlížečů webkit. Tato vlastnost byla 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 ji přestal podporovat ve verzi 0.9.
Transparentnost CSS ve Firefoxu, Safari, Chrome a Opeře
Pro většinu moderní prohlížeče stačí použít následující vlastnost:
#myElement ( neprůhlednost: .7; )
Ve výše uvedeném příkladu je prvek nastaven na 70% neprůhlednost (30% průhlednost). To znamená, že pokud nastavíme hodnotu na jedničku, prvek bude neprůhledný, a proto nastavením této hodnoty na nulu bude neviditelný.
Vlastnost opacity zpracovává 2 desetinné číslice. To znamená, že hodnota ".01" se bude lišit od hodnoty ".02", i když to není patrné.
Transparentnost CSS pro Internet Explorer
Internet Explorer jako obvykle není 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í, aby bylo dosaženo pozitivního výsledku.
#myElement ( filtr: alpha(opacity=40); )
Tento příklad používá vlastnost filter, která funguje ve verzích 6-8, avšak pro verze 6 a 7 existuje jedno omezení: vlastnost hasLayout prvku musí být nastavena na hodnotu true . Tato vlastnost je přítomna 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(opacity=40); /* funguje v IE6, IE7 a IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * pouze pro 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 transparentnosti 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(( opacity: .4 )); // funguje ve všech prohlížečích
Tuto vlastnost můžete animovat:
$("#myElement").animate(( opacity: .4 ), 1000, function() ( // Animace je dokončena; tento kód funguje ve všech prohlížečích. ));
funkce RGBA
CSS3 plánuje podporovat alfa kanály 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.
#hsla ( pozadí: hsla(207, 38 %, 47 %, .4); )
Důležitým bodem při používání funkcí rgba a hsla je, že nastavení průhlednosti se nepoužije na podřízené prvky, zatímco použití vlastnosti opacity je zděděno.