CSS vlastnost 3 neprůhlednost umožňuje zprůhlednit ten či onen prvek webu.
Míra průhlednosti prvku je určena hodnotou od 0 před 1 kde 0 - zcela transparentní 1 - vůbec neprůhledné.. Například hodnota 0.5 vlastnosti neprůhlednost aplikovaný na obrázek bude znamenat, že tento obrázek by měl být průsvitný.
Transparentnost v IE
Prohlížeč internet Explorer nepodporuje vlastnosti neprůhlednost až do deváté verze má však vlastní filtr, kterým můžete nastavit míru průhlednosti:
filtr: alfa(neprůhlednost=50)
Význam neprůhlednost pro filtr internetový prohlížeč Průzkumník se může lišit od 0 - zcela transparentní vůči 100 - neprůhledné
Bloky tohoto menu budou průsvitné i při najetí myší v IE!!
Domov
mapa stránek
Kupte si slona
prodat slona
Půjčte si slona
Předpony.
Tím by se v zásadě dala dokončit kapitola o transparentnosti, ale rád bych vám řekl více o tzv předpony dodavatele.. tito soudruzi nemají s touto kapitolou mnoho společného, nicméně dále v průběhu učení CSS3 se budou potkávat stále častěji a někde si o nich potřebuji promluvit - tak vám to řeknu zde.
Předpony dodavatele jsou tedy speciální předpony vlastností CSS, které používají prohlížeče pro experimentální vlastnosti, které nejsou oficiálně součástí specifikace CSS.
Pamatujeme si, že specifikace CSS 3 je stále ve vývoji a formálně vlastnosti popsané v tomto tutoriálu v přírodě neexistují, ale prohlížeče je již aktivně používají na vlastní nebezpečí a riziko.
Proč na vlastní nebezpečí? Ano, protože je možné, že až bude specifikace CSS 3 oficiálně schválena, vlastnosti v ní popsané se budou svým působením lišit od vlastností se stejným názvem, které již prohlížeče používají. Pojďme se podívat na vývojáře specifikací CSS 3 pro označení vlastnosti neprůhlednost ne jako stupeň průhlednosti bloku, ale např. jako jeho stínování nebo blikání (samozřejmě píšu nesmysly), které pak už zobrazí miliony nainstalované prohlížeče pro který neprůhlednost je to transparentnost?
Nebo řekněme vývojáři prohlížečů přišli s vlastní vlastností – inovací, kterou vůbec nikdo nikde nemá, ale dokument s takovou vlastností neprojde kontrolou platnosti, protože taková vlastnost ve specifikaci není.
Z těchto a dalších důvodů používají prohlížeče na začátku vlastností předpony, které nejsou součástí oficiální specifikace. Každý prohlížeč má svou vlastní předponu začínající znakem „-“, tento znak na začátku vlastnosti, stejně jako znak „_“ podle specifikace CSS 2.1 značí, že vlastnost je vyhrazena pro rozšíření CSS určitých prohlížeče.
Zde jsou nejoblíbenější prohlížeče a jejich předpony:
| Prohlížeč | Předpona |
|---|---|
| Opera | -Ó- |
| Firefox, SeaMonkey, Camino | -moz- |
| Internet Explorer 8 a vyšší | -slečna- |
| Safari až do verze 3, Konqueror | -khtml- |
| Safari 3 a vyšší, Google Chrome | -webkit- |
Použití prefixů je velmi snadné, stačí vzít nějakou CSS vlastnost a dosadit za ni požadovaný prefix, například za vlastnost neprůhlednost náhradní -moz- ukazuje se: -moz-opacity
I když ve skutečnosti můj výraz" používat předpony» špatně! ve skutečnosti se nikde nic nenahrazuje, existuje jen vlastnost neprůhlednost, je tady -moz-opacity a to jsou dvě různé vlastnosti, které nemusí plnit stejnou funkci!! - je třeba chápat.
A také je třeba chápat, že určité specifické prohlížeče až do určitých verzí mohou podporovat vlastnosti CSS pouze s vlastními předponami (opět se vyjadřuji špatně, je správné říkat, že moje vlastní vlastnosti jsou rozšíření CSS prohlížeče), popř. může zpočátku spoléhat i na vyvinuté specifikace. – Každý konkrétní případ v této učebnici zvážíme samostatně.
Pokud jde o tuto kapitolu o transparentnosti, je třeba poznamenat, že Prohlížeč Firefox 3.5 a starší používat svůj vlastní majetek -moz-opacity a prohlížeč Safari před verzí 1.1 používá jeho vlastnost -khtml-opacity .
Aby byl náš příklad zcela použitelný pro různé prohlížeče, musíme do kódu přidat několik dalších řádků:
Jak vidíte, prefixy výrazně natahují kód a jejich použití není vždy opodstatněné, pokud jsou verze prohlížečů, které chtějí pracovat s určitými vlastnostmi pouze pomocí vlastních prefixů, poměrně staré, jako je tomu u vlastnosti neprůhlednost, pak je nemůžete označit .. - i když je to samozřejmě špatná rada ..
Nyní několik užitečných tipů..
Vždy používejte prefixy (dobře, pokud se bez nich samozřejmě ten či onen prohlížeč neobejde) v případech, kdy použitá vlastnost může výrazně ovlivnit výkon, čitelnost a použitelnost webu. Jedna věc je, když některé drobnosti v designu webu nebudou fungovat, a něco úplně jiného, když například nefunguje menu webu nebo není možné přečíst text na webu kvůli tomu, že prohlížeč ano. nepodporuje nějakou vlastnost, ale místo toho používá podobnou svou vlastní.
V CSS existují tři způsoby, jak změnit průhlednost prvku:
pomocí vlastnosti opacity,
pomocí funkce rgba()
pomocí funkce hsla().
1. Vlastnost opacity
Vlastnost opacity umožňuje zčásti nebo úplně zprůhlednit jakýkoli prvek webové stránky. Tato vlastnost mění průhlednost prvků, které jsou nastaveny na obrázek na pozadí(obrázek) nebo nastavte pozadí barvou nebo přechodem. Pokud prvek, který má použitou vlastnost opacity, obsahuje další prvky, změní se také jejich krytí.
Vlastnost opacity nabývá hodnot mezi 0 (plně průhledná) a 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 RGB().
Barevný model RGBA vytváří barevný odstí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 barvy. Na rozdíl od vlastnosti opacity u rámečku obsahujícího jiné prvky funkce rgba() změní pouze průhlednost rámečku.
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 hsl().
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ž okrajích jsou základní barvy:
0/360° - červená
60° - žlutá
120° - zelená
180° - modrá
240° - modrá
270° - fialová
300° purpurová.
Chcete-li získat černou, musíte nastavit hodnoty odstínu, sytosti a jasu na nulu - hsla(0, 0 %, 0 %, 1) . Bílá se získá při 100% jasu hsla (0, 0 %, 100 %, 1) a šedá se získá při nulová hodnota saturace hsla(0, 0 %, 50 %, 1) .
CSS3 definuje vlastnost opacity pro použití transparentního efektu na prvky stránky. Hodnota této vlastnosti je číslo mezi 0,0 a 1,0. Hodnota nula činí prvek zcela průhledným, zatímco hodnota jedna jej činí zcela neprůhledným. Vlastnost lze použít na jakýkoli prvek stránky.
Img1 ( neprůhlednost: 0,2; ) .img2 ( neprůhlednost: 0,5; ) .img3 ( neprůhlednost: 1,0; )
Chcete-li nastavit průhlednost pomocí skriptu, použijte: object.style.opacity
Stará Mozilla a Firefox 0.8 používají pro tuto vlastnost svůj vlastní název: -moz-opacity Pro nastavení průhlednosti pomocí skriptu použijte: object.style.MozOpacity
Safari 1.1, Konqueror 3.1 - postaveno na enginu KHTML, k ovládání průhlednosti použijte vlastnost: -khtml-opacity Pro nastavení průhlednosti pomocí skriptu použijte: object.style.KhtmlOpacity
Safari používá neprůhlednost CSS3 od verze 1.2, ale Konqueror starší než verze 3.1, protože přestal podporovat -khtml-opacity, podporu pro neprůhlednost CSS3 nezavedl.
Internet Explorer od verze 5.5 až po dnešní nejnovější Internetová verze Průzkumník 7 implementuje průhlednost prostřednictvím filtru Alpha DirectX. Stojí za zmínku, že tento filtr používá hodnotu průhlednosti v rozsahu od 0 do 100 (a ne od 0,0 do 1,0). Všiml jsem si také, že filtr lze použít pouze na prvek s vlastnostmi height, width, nebo position nastavenou na absolutní nebo writeMode nastaveným na tb-rl nebo contentEditable nastaveným na true.
Příklad (nastavení krytí na polovinu):
Img1 ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); )/* IE5.5+ syntaxe (preferováno) */ .img2 (filtr: alpha(opacity=50); ) /* IE4 syntaxe */ Komu nastavte průhlednost pomocí skriptu, použijte: object.style.filter = "progid:DXImageTransform.Microsoft.Alpha(řetězec parametru)"
Chcete-li získat průhlednost podobnou průhlednosti W3C, použijte jako řetězec parametru "opacity=číslo od 0 do 100".
Jak to udělat, aby to fungovalo ve všech prohlížečích:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacity: 0.5; /* Mozilla 1.6 a nižší */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ krytí: 0,5; /* CSS3 – Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */javascript
function setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Pokud neexistuje žádný prvek se zadaným ID nebo prohlížeč nepodporuje ani jednu z metod známých funkcí pro řízení průhlednosti if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // Pokud je průhlednost již nastavena, změňte ji pomocí filtrů kolekce, jinak přidejte průhlednost přes style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; jinak elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // Aby nedošlo k přepsání jiných filtrů, použijte "+=" ) else // Jiné prohlížeče elem.style = nOpacity; ) function getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // kompatibilní s CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) return "opacity"; jinak if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 a starší, Firefox 0.8 vrátí "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 vrátí "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ vrátí "filtr"; vrátit false; // žádná průhlednost )Úkol
Vytvořte blokový prvek s průsvitným celým obsahem.
Řešení
Pro změnu stupně průhlednosti prvku se používá vlastnost stylu opacity s hodnotou od 0 do 1, kde 0 odpovídá plné průhlednosti a 1 naopak neprůhlednosti objektu. V Internet Exploreru 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.
Příklad 1. Poloprůhledná vrstva
HTML5 CSS 2.1 IE Cr Op Sa Fx
Výsledek tento příklad znázorněno na Obr. jeden.
Rýže. 1. Poloprůhledná vrstva v prohlížeči Safari
Vlastnost filter přidává průhlednost pouze těm prvkům, kde je nastavena alespoň jedna z velikostí (šířka nebo výška) nebo je prvek nastaven na absolutní umístění(pozice: absolutní).
Všimněte si také, že průhlednost ovlivňuje veškerý obsah vrstvy, včetně podřízených prvků, a nebudete moci pro ně zvýšit úroveň krytí změnou krytí. V příkladu 1, kde je průhlednost vrstvy nastavena na 0,7, získá text uvnitř vrstvy stejnou hodnotu. Je přípustné nastavit méně, ale text nesmí překročit hodnotu průhlednosti 0,7.
Vlastnost CSS opacity je zodpovědná za průhlednost prvků (obrázků, textu, bloků) v html.
Syntaxe 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. transparentní obrázek v html
První obrázek je vykreslen bez průhlednosti, druhý s průhledností 0,5.
Průsvitnost prvku
Zprůhlednění obrazu při vznášení!
DemoDownload zdrojůDěkuji za pozornost!
Další článek
Jak vytvořit rolovací div?