Čiiiiix!

Zaujímalo by ma, či by som mal písať o vlastnosti transparentnosti pre CSS 3? Áno, teraz mojim smerom poletí veľa poznámok, že o tejto nehnuteľnosti už všetci vedia! Ha, nie! Som si istý, že nie všetky.

Zapnuté tento moment väčšina najnovšie verzie moderné prehliadače už podporujú CSS 3 ( !!!Dokonca IE 9!!!). Môžete sa teda už pokúsiť implementovať tieto vlastnosti do kódov vašich stránok.

A tak sa vráťme k majetku“ nepriehľadnosť“, čo dáva zaujímavý efekt, bez zásahu grafiky, len napísaním 1 riadku kódu.

Čo je "nepriehľadnosť" v CSS 3?

"nepriehľadnosť" určuje priehľadnosť akéhokoľvek prvku na webovej stránke. To znamená, že nastavením určitej úrovne priehľadnosti budeme môcť vidieť obrázok na pozadí alebo iný prvok, ktorý sa bude nachádzať pod prvkom, pre ktorý je priehľadnosť nastavená. Pohodlné, nie?

Na svojom blogu mám niekoľko prvkov, ktoré majú priradenú túto vlastnosť. Živý príklad môžete vidieť, keď prejdete úplne dole na bočný panel, je tam sekcia " Priatelia". Obrázok je nudný, však? Teraz naň presuňte kurzor myši. Je to jasnejšie, nie?)

Teraz vám poviem podrobnejšie, ako som to implementoval.

Pre prvok musíme nastaviť predvolenú priehľadnosť. To znamená, že prvok bude vyzerať trochu nudne. Nepriehľadnosť som nastavil na 70%. Ale keďže všetky prehliadače chápu kód inak, musíme napísať univerzálny kód.

Pre Firefox,Opera,Chrome píšeme:

Nepriehľadnosť:X;

Kde " X" - hodnota v rozsahu od 0.0 1.0 (nepriehľadnosť prvku).

Pre internet Explorer (podporuje 8 a 9 verzií):

Filter:alpha(opacity=X);

Kde " X" - hodnota v rozsahu od 0 (úplná priehľadnosť prvkov) až 100 (nepriehľadnosť prvku).

Myimage ( nepriehľadnosť:0,7; filter:alfa(nepriehľadnosť=70); )

Teraz nastavíme pravidlá pre prvok, keď sa nad ním umiestni kurzor myši. Musíme vidieť jasné zobrazenie prvku, a preto som nastavil nepriehľadnosť na 100%, to znamená, že prvok vyzerá tak, ako v skutočnosti je:

Myimage:hover ( nepriehľadnosť:1,0; filter:alpha(nepriehľadnosť=100); )

Tu je pár príkladov:

Priehľadnosť fotografie100 (1.0), to znamená, že neexistuje žiadna transparentnosť

Priehľadnosť fotografie70 (0.7). Viacfarebné kruhy sú obrázok, ktorý „preráža“, ktorý sa nachádza na pozadí, t.j. pod fotkou

Popis

Určuje úroveň priehľadnosti prvku webovej stránky. Keď je prvok čiastočne alebo úplne priehľadný, presvitá obrázok na pozadí alebo iné prvky umiestnené pod priesvitným objektom.

Syntax

nepriehľadnosť: hodnota

hodnoty

Hodnota je číslo z rozsahu. Hodnota 0 zodpovedá úplnej priehľadnosti prvku a 1 naopak zodpovedá jeho nepriehľadnosti. Zlomkové čísla typ 0,6 nastavuje priesvitnosť. Je povolené písať čísla bez úvodnej nuly, ako je nepriehľadnosť: .6.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Výsledok tento príklad znázornené na obr. 1.

Ryža. 1. Výsledok použitia nepriehľadnosti

Prehliadače

Firefox pred verziou 3.5 podporuje neštandardnú vlastnosť -moz-opacity.

Internet Explorer do verzie 9.0 používa filtre na zmenu priehľadnosti pre tento prehliadač by ste mali napísať filter : alpha(opacity=50) , kde parameter opacity môže mať hodnotu od 0 do 100.

V tejto lekcii sa na to pozrieme CSS vlastnosti - nepriehľadnosť A RGBA. Nehnuteľnosť Nepriehľadnosť zodpovedá len za transparentnosť prvkov a funkciu RGBA– pre farbu a priehľadnosť, ak zadáte hodnotu priehľadnosti alfa kanála.

Priehľadnosť CSS Nepriehľadnosť

Digitálna hodnota pre nepriehľadnosť nastaviť v rozsahu od 0,0 do 1,0, kde nula je úplná priehľadnosť a jedna je naopak absolútna nepriehľadnosť. Napríklad, ak chcete vidieť 50% priehľadnosť, musíte nastaviť hodnotu na 0,5. To treba mať na pamäti nepriehľadnosť platí na všetko detské prvky rodič. To znamená, že text na priesvitnom pozadí bude tiež priesvitný. A to je veľmi výrazný nedostatok, ten text tak dobre nevynikne.

Snímka obrazovky jasne ukazuje, že čierny text sa stal rovnako priesvitným ako modré pozadie.

Div (
pozadie: url(obrázky/váš obrázok.jpg); /* Obrázok na pozadí */
šírka: 750px;
výška: 100px;
okraj: auto;
}
.Modrá(
pozadie: #027av4; /* Priesvitná farba pozadia */
nepriehľadnosť: 0,3; /* Hodnota priesvitnosti pozadia */
výška: 70px;
}
h1 (
výplň: 6px;
rodina písiem: Arial Black;
font-weight: tučnejšie;
veľkosť písma: 50px;
}

Transparentnosť CSS vo formáte RGBA

Formát pre záznam farby RGBA, je modernejšou alternatívou nehnuteľnosti nepriehľadnosť. R (červená), G (zelená), B (modrá)- znamená: červená, zelená, modrá. Posledný list A– znamená alfa kanál, ktorý nastavuje transparentnosť. RGBA Na rozdiel od Nepriehľadnosť neovplyvňuje podradené prvky.

Teraz sa pozrime na náš príklad použitia RGBA. Nahraďte tieto riadky v štýloch.

Pozadie: ##027av4; /* Farba pozadia */
nepriehľadnosť: 0,3; /* hodnota priesvitnosti pozadia */

na ďalší riadok

Pozadie: rgba(2, 127, 212, 0,3);

Ako vidíte, hodnota priehľadnosti 0,3 je rovnaká pre obe metódy.

Výsledok príkladu RGBA:

Druhá snímka obrazovky vyzerá oveľa lepšie ako prvá.

Pohrávaním sa s priesvitnosťou pozadia blokov môžete na svojom webe dosiahnuť zaujímavé efekty. Je dôležité, aby tieto priesvitné bloky išli na vrchol farebného dizajnu, ako je napríklad fotografia. Iba v tomto prípade bude účinok viditeľný. Táto technika sa už dlho používa v dizajne, ešte pred príchodom akéhokoľvek CSS3, bola implementovaná čisto v grafických programoch.

Ak zákazník požaduje, aby rozloženie vyzeralo dobre v starších verziách prehliadača internet Explorer a potom pridajte vlastnosť filter a nezabudnite to okomentovať, aby to neovplyvnilo platnosť kódu.

Záver

Formátovať RGBA každý podporuje moderné prehliadače, s výnimkou internet Explorer. To je tiež veľmi dôležité RGBA flexibilný, pôsobí len na konkrétny špecifikovaný prvok, bez toho, aby ovplyvňoval jeho deti. Je jasné, že pre dizajnéra rozloženia je to pohodlnejšie. Moja voľba je jednoznačne v prospech formátu RGBA na získanie transparentnosť v CSS.

Pre lepšiu konsolidáciu materiálu a väčšiu prehľadnosť navrhujem prejsť.

Úloha

Urobte prvok bloku a celý jeho obsah polopriehľadný.

Riešenie

Na zmenu stupňa priehľadnosti prvku použite vlastnosť opacity style s hodnotou od 0 do 1, kde 0 zodpovedá úplnej priehľadnosti a 1, naopak, nepriehľadnosti objektu. IN internetový prehliadač Prieskumník táto vlastnosť nefunguje, takže musíte použiť filter špeciálne pre ňu, vlastnosť, ktorá nie je súčasťou špecifikácie CSS. Príklad 1 ukazuje, ako nastaviť priehľadnosť vrstvy pre všetky prehliadače.

Príklad 1: Priesvitná vrstva

HTML5 CSS 2.1 IE Cr Op Sa Fx

Výsledok tohto príkladu je znázornený na obr. 1.

Ryža. 1. Priesvitná vrstva v Prehliadač Safari

Vlastnosť filter pridáva priehľadnosť len tým prvkom, kde je nastavená aspoň jedna z dimenzií (šírka alebo výška) alebo je prvok nastavený na absolútne umiestnenie(pozícia: absolútna).

Všimnite si tiež, že priehľadnosť ovplyvňuje celý obsah vrstvy vrátane podradených prvkov a nebudete môcť pre ne zvýšiť úroveň nepriehľadnosti zmenou nepriehľadnosti. V príklade 1, kde je nepriehľadnosť vrstvy nastavená na 0,7, dostane text vo vrstve rovnakú hodnotu. Je povolené nastaviť ho nižšie, ale text nesmie presiahnuť hodnotu priehľadnosti 0,7.

Za transparentnosť prvkov (obrázkov, textu, blokov) v html zodpovedá vlastnosť CSS opacity.

Syntax nepriehľadnosti CSS

nepriehľadnosť: hodnota;

Kde hodnota môže nadobúdať skutočné hodnoty v rozsahu od 0,0 do 1,0. Hodnota 1,0 znamená žiadnu priehľadnosť (predvolené).

Príklady: ako transparentnosť v html

Príklad č.1. Transparentný obrázok v html

Prvý obrázok sa zobrazí bez priehľadnosti, druhý s priehľadnosťou 0,5

Príklad č.2. Efekty s priehľadnosťou v html

Štandardne je blok čiastočne priehľadný. Keď umiestnite kurzor myši na blok, rozsvieti sa. Takéto efekty sa často používajú v dizajne webových stránok.

Stránka sa skonvertuje na nasledujúcu

Príklad č.3. Transparentný blok na obrázku v html

Nižšie je uvedený príklad polopriehľadného bloku, ktorý čiastočne zakryl obraz. Blok zámerne úplne nezakrýva obrázok, aby ukázal, ako vyzerá na prázdnom pozadí.

Stránka sa skonvertuje na nasledujúcu

Poznámka
Internet Explorer do verzie 9.0 používa filtre na zmenu priehľadnosti pre tento prehliadač by ste mali napísať filter: alpha(opacity=50), kde parameter opacity môže mať hodnotu od 0 do 100.

Ak chcete získať prístup k nepriehľadnosti z JavaScriptu, musíte napísať nasledujúcu konštrukciu:

object.style.opacity ="VALUE "