Chiiiiix!

Přemýšlel jsem, jestli bych měl psát o vlastnosti průhlednosti pro CSS 3? Ano, teď mým směrem poletí spousta poznámek, že o této nemovitosti už všichni vědí! Ha, ne! Jsem si jistý, že ne všechny.

Na tento moment většina nejnovější verze moderní prohlížeče již podporují CSS 3 ( !!!Dokonce IE 9!!!). Už teď se tedy můžete pokusit implementovat tyto vlastnosti do kódů vašich stránek.

A tak se vraťme k majetku" neprůhlednost“, což dává zajímavý efekt, bez zásahu grafiky, pouhým napsáním 1 řádku kódu.

Co je "neprůhlednost" v CSS 3?

"neprůhlednost" určuje průhlednost jakéhokoli prvku na webové stránce. To znamená, že nastavením určité úrovně průhlednosti budeme moci vidět obrázek na pozadí nebo jiný prvek, který se bude nacházet pod prvkem, pro který je průhlednost nastavena. Pohodlné, není to tak?

Na svém blogu mám několik prvků, kterým je tato vlastnost přiřazena. Živý příklad můžete vidět, když přejdete úplně dole na postranní panel, je zde sekce " Přátelé". Obrázek je matný, že? Nyní na něj přesuňte kurzor myši. Je to jasnější, ne?)

Nyní vám řeknu podrobněji, jak jsem to implementoval.

Musíme nastavit výchozí průhlednost prvku. To znamená, že prvek bude vypadat trochu nudně. Krytí jsem nastavil na 70%. Ale protože všechny prohlížeče chápou kód jinak, musíme napsat univerzální kód.

Pro Firefox,Opera,Chrome píšeme:

Neprůhlednost:X;

kde" X" - hodnota v rozsahu od 0.0 1.0 (neprůhlednost prvku).

Pro internet Explorer (podporuje 8 a 9 verze):

Filtr:alpha(neprůhlednost=X);

kde" X" - hodnota v rozsahu od 0 (úplná průhlednost prvků) až 100 (neprůhlednost prvku).

Můj obrázek ( neprůhlednost:0,7; filtr:alfa(průhlednost=70); )

Nyní nastavíme pravidla pro prvek, když nad ním najedeme kurzorem myši. Potřebujeme vidět jasné zobrazení prvku, a proto jsem nastavil neprůhlednost na 100 %, to znamená, že prvek vypadá tak, jak ve skutečnosti je:

Myimage:hover ( opacity:1.0; filter:alpha(opacity=100); )

Zde je několik příkladů:

Průhlednost fotografie100 (1.0), to znamená, že neexistuje žádná transparentnost

Průhlednost fotografie70 (0.7). Vícebarevné kruhy jsou obrázek, který „proráží“, který se nachází na pozadí, tzn. pod fotkou

Popis

Určuje úroveň průhlednosti prvku webové stránky. Když je prvek částečně nebo zcela průhledný, prosvítá obrázek na pozadí nebo jiné prvky umístěné pod průsvitným objektem.

Syntax

neprůhlednost: hodnota

Hodnoty

Hodnota je číslo z rozsahu. Hodnota 0 odpovídá plné průhlednosti prvku a 1 naopak odpovídá jeho neprůhlednosti. Zlomková čísla typ 0,6 nastavuje průsvitnost. Je povoleno psát čísla bez úvodní nuly, jako je neprůhlednost: .6.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Výsledek tento příklad znázorněno na Obr. 1.

Rýže. 1. Výsledek použití neprůhlednosti

Prohlížeče

Firefox před verzí 3.5 podporuje nestandardní vlastnost -moz-opacity.

Internet Explorer do verze 9.0 používá filtry pro změnu průhlednosti pro tento prohlížeč byste měli napsat filter : alpha(opacity=50) , kde parametr opacity může nabývat hodnoty od 0 do 100.

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 platí na všechno podřízené prvky rodič. To znamená, že text na průsvitném pozadí bude také průsvitný. A to je velmi výrazný nedostatek, text tak dobře nevynikne.

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; /* Průsvitná barva 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ší;
font-size: 50px;
}

Průhlednost CSS ve formátu RGBA

Formát pro záznam barvy RGBA, je modernější alternativou nemovitosti 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.

Úkol

Udělejte z prvku bloku a celého jeho obsahu poloprůhledný.

Řešení

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 internetový prohlížeč Průzkumník 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: Průsvitná vrstva

HTML5 CSS 2.1 IE Cr Op Sa Fx

Výsledek tohoto příkladu je znázorněn na Obr. 1.

Rýže. 1. Průsvitná vrstva dovnitř Prohlížeč Safari

Vlastnost filter přidává průhlednost pouze těm prvkům, kde je nastavena alespoň jedna z dimenzí (šíř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 celý 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 krytí vrstvy nastaveno na 0,7, získá text uvnitř vrstvy stejnou hodnotu. Je přípustné nastavit nižší hodnotu, 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 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í

Poznámka
Internet Explorer do verze 9.0 používá filtry pro změnu průhlednosti pro tento prohlížeč byste měli napsat filtr: alpha(opacity=50), kde parametr opacity může nabývat hodnoty od 0 do 100.

Chcete-li získat přístup k neprůhlednosti z JavaScriptu, musíte napsat následující konstrukci:

object.style.opacity ="VALUE "