Průhlednost CSS- řešení pro různé prohlížeče - 3,8 z 5 na základě 6 hlasů

V této lekci se podíváme na průhlednost CSS, naučíme se, jak dát průhlednost různým prvkům stránky a dosáhnout plné kompatibility mezi prohlížeči, tj. tento efekt bude fungovat stejně v různých prohlížečích.

Jak nastavit průhlednost libovolného prvku

V CSS3 je vlastnost opacity zodpovědná za vytváření průhledných prvků, které lze aplikovat na jakýkoli prvek. Tato vlastnost má hodnoty od 0 do 1, které určují míru průhlednosti. Kde 0 je úplná průhlednost (výchozí hodnota pro všechny prvky) a 1 je úplná neprůhlednost. Hodnoty se zapisují jako zlomky: 0,1, 0,2, 0,3 atd.

Příklad použití:

Průhlednost napříč prohlížeči

Ne všechny prohlížeče vnímají a implementují výše uvedenou vlastnost neprůhlednosti stejným způsobem. V některých případech je nutné použít jiný název vlastnosti nebo filtry.

Následující pohledy podporují vlastnost neprůhlednosti CSS3 Prohlížeče Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Takový dobrý prohlížeč :) internet Explorer až do verze 9.0 nepodporuje vlastnost opacity a pro vytvoření průhlednosti pro tento prohlížeč je třeba použít vlastnost filter a hodnotu alpha(Opacity=X), ve které X je celé číslo v rozsahu od 0 do 100, které určuje úroveň transparentnosti. 0 je zcela průhledná a 100 je zcela neprůhledná.

Pokud jde o Prohlížeč Firefox před verzí 3.5 podporuje vlastnost -moz-opacity místo opacity.

Prohlížeče jako Safari 1.1 a Konqueror 3.1, postavené na enginu KHTML, používají k ovládání průhlednosti vlastnost -khtml-opacity.

Jak můžete nastavit průhlednost v CSS tak, aby vypadala stejně ve všech prohlížečích? Chcete-li vytvořit řešení pro průhlednost prvků napříč prohlížeči, musí zadat nejen jednu vlastnost neprůhlednosti, ale následující sadu vlastností:

filtr: alpha(Neprůhlednost=50); /* Průhlednost pro IE */ -moz-opacity: 0.5; /* Podporuje Mozillu 3.5 a nižší */ -khtml-opacity: 0.5; /* Podporuje Konqueror 3.1 a Safari 1.1 */ krytí: 0,5; /* Podporuje všechny ostatní prohlížeče */

Transparentnost různých prvků

Podívejme se na několik příkladů nastavení průhlednosti u určitých prvků, které se na stránce nejčastěji používají.

Průhlednost obrázků CSS.

Podívejme se na několik možností, jak vytvořit průsvitný obrázek. V následujícím příkladu první obrázek nemá nastavenou průhlednost, druhý má průhlednost 50 % a třetí má 30 %.

Výsledek:

Průhlednost v CSS při najetí myší na obrázek.

Často je to nutné udělat průhledný obrázek nebo jakýkoli jiný prvek v okamžiku, kdy nad ním najede kurzor. To lze provést pomocí Nápověda CSS pseudotřída: vznášet se. K tomu je třeba našemu obrázku přiřadit dvě třídy, jednu normální - to bude neaktivní stav obrázku a druhou třídu s pseudotřídou: hover, zde musíte v tuto chvíli zadat průhlednost obrázku najetí kurzorem.

Výsledek můžete vidět v ukázce.

Průhlednost pozadí pomocí CSS.

Zde je nutné pamatovat na to, že průhlednost platí pro všechny vnořené prvky a nemohou mít větší průhlednost než vnořený prvek.

Jako příklad uvedeme variantu s pozadím stránky vytvořeným pomocí obrázku a blok s pozadím vytvořeným pomocí barvy a průhledností 50 %.

Ukázkový kód:

Zde je výsledek výše uvedeného kódu:

V této lekci se na takové podíváme CSS vlastnosti - neprůhlednost A RGBA. Vlastnictví Neprůhlednost odpovídá pouze za průhlednost prvků a funkci RGBA– pro barvu a průhlednost, pokud zadáte hodnotu průhlednosti alfa kanálu.

Průhlednost CSS Neprůhlednost

Digitální hodnota pro neprůhlednost nastavit v rozsahu od 0,0 do 1,0, kde nula je úplná průhlednost a jedna je naopak absolutní neprůhlednost. Chcete-li například vidět 50% průhlednost, musíte nastavit hodnotu na 0,5. To je třeba mít na paměti neprůhlednostšíří na všechny podřízené prvky nadřazeného prvku. To znamená, že text na průsvitné pozadí, bude také průsvitný. A to je velmi výrazný nedostatek, text tak nevyniká.

Snímek obrazovky jasně ukazuje, že černý text se stal stejně průsvitným jako modré pozadí.

Div (
pozadí: url(obrázky/váš obrázek.jpg); /* Obrázek na pozadí */
šířka: 750px;
výška: 100px;
okraj: auto;
}
.modrá (
pozadí: #027av4; /* Barva podlahy průhledné pozadí */
neprůhlednost: 0,3; /* Hodnota průsvitnosti pozadí */
výška: 70px;
}
h1 (
výplň: 6px;
rodina písem: Arial Black;
váha písma: tučnější;
velikost písma: 50px;
}

Průhlednost CSS ve formátu RGBA

Formát pro záznam barvy RGBA, je více moderní alternativa pro majetek neprůhlednost. R (červená), G (zelená), B (modrá)- znamená: červená, zelená, modrá. Poslední dopis A– znamená alfa kanál, který nastavuje průhlednost. RGBA Na rozdíl od Neprůhlednost neovlivňuje podřízené prvky.

Nyní se podívejme na náš příklad použití RGBA. Pojďme tyto řádky nahradit ve stylech.

Pozadí: ##027av4; /* Barva pozadí */
neprůhlednost: 0,3; /* hodnota průsvitnosti pozadí */

na další řádek

Pozadí: rgba(2, 127, 212, 0,3);

Jak vidíte, hodnota průhlednosti 0,3 je pro obě metody stejná.

Výsledek příkladu RGBA:

Druhý snímek obrazovky vypadá mnohem lépe než první.

Hraním s průsvitností pozadí bloků můžete na svém webu dosáhnout zajímavých efektů. Je důležité, aby tyto průsvitné bloky šly na vrchol barevného designu, jako je fotografie. Pouze v tomto případě bude účinek patrný. Tato technika se již dlouho používá v designu, ještě před příchodem jakéhokoli CSS3, byla implementována čistě v grafických programech.

Pokud zákazník požaduje, aby rozložení vypadalo dobře ve starších verzích prohlížeče internet Explorer a poté přidejte vlastnost filtr a nezapomeňte okomentovat, aby nebyla ovlivněna platnost kódu.

Závěr

Formát RGBA všichni podporují moderní prohlížeče, s výjimkou internet Explorer. To je také velmi důležité RGBA flexibilní, působí pouze na konkrétní specifikovaný prvek, aniž by ovlivňoval jeho potomky. Je jasné, že to je pro návrháře rozložení pohodlnější. Moje volba je jednoznačně ve prospěch formátu RGBA pro získání transparentnost v CSS.

Pro lepší konsolidaci materiálu a větší přehlednost doporučuji projít.

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ších verzích Firefoxu a Safari musíte vlastnost použít následovně:

#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ích prohlíž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.

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. Tato vlastnost nefunguje v Internet Exploreru, 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 je řeč, i pro ty čtenáře, kteří nejsou obeznámeni s netradičními možnostmi, jak vytvořit průsvitný efekt.

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.

Vlastnost CSS opacity 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

Udělejte obrázek průsvitným při najetí myší!

DemoDownload zdrojů

Děkuji za pozornost!

Další článek
Jak vytvořit div blok s rolováním?