CSS má tri spôsoby, ako zmeniť priehľadnosť položky:
použitie vlastnosti opacity,
pomocou funkcie RGBA (),
pomocou funkcie HSLA ().
1. Vlastnosť opacity
Vlastnosť opacity vám umožňuje čiastočne alebo úplne transparentný prvok webovej stránky. Táto vlastnosť mení priehľadnosť prvkov, pre ktoré je obrázok pozadia nastavený (obrázok) alebo pozadie s farbou alebo gradientom. Ak je prvok, pre ktorý sa aplikuje vlastnosť opacity, obsahuje iné prvky v sebe, budú tiež meniť ich transparentnosť.
Vlastnosť opacity berie hodnoty v rozsahu od 0 (úplne transparentné) na 1 (nepriehľadné), napríklad:
H1 (Farba: # CD6829;) DIV (pozadie: # CDD6DB; Opacity: .3;) 
Obr. 1. Transparentnosť prvkov s použitím opacity
2. Funkcia RGBA ()
Farebný model RGBA vytvára farebný odtieň zmiešaním v požadovaných pomeroch Červená (červená), zelená (zelená) a modrá (modrá) Kvety, A. alfa kanál (alfa) Zodpovedný za stupeň transparentnosti farby. Na rozdiel od vlastnosti opacity, pre blok obsahujúci iné prvky, funkcia RGBA () zmení len priehľadnosť bloku.
Obr. 2. Farebný model RGB H1 (farba: # CD6829;) DIV (pozadie: RGBA (205, 214, 219, 0,3);) 
Obr. 3. Transparentnosť prvkov pomocou funkcie RGBA () 3. Funkcia HSLA ()
HSLA () funkcia, ktorej parametre znamenajú tONE (HUE), sýtosť, Ľahkosť (ľahkosť) a alfa kanál (alfa)Tiež vám umožňuje určiť priesvitnú farbu.
Farebné odtiene sú nastavené ako percento pomocou príslušnej hodnoty z farebného kruhu. Samotný rozsah je rozdelený do sektorov, na ktorých hranice sú hlavné farby:
0/360 ° - červená
60 ° - žltá
120 ° - zelená
180 ° - modrá farba
240 ° - modrá farba
270 ° - fialová farba
300 ° - purpurová farba.
Ak chcete vytvoriť transparentnosť účinok v CSS, použije sa vlastnosť opacity.
IE8 Prehliadač a skoršie verzie podporujú alternatívnu vlastnosť - Filter: Alpha (Opacity \u003d X), kde "X" môže mať hodnotu od 0 do 100, tým menšia je hodnota, tým viac je to transparentnejší je prvok.
Všetky ostatné prehliadače podporujú štandardnú vlastnosť CSS nepriehľadnosť, ktorá môže byť považovaná za hodnotu čísla od 0,0 do 1,0, tým menšia je hodnota, tým viac je to transparentnejší je prvok:
Vyskúšať
Transparentnosť vznášania sa
Pseudo-Trieda: Hover vám umožňuje zmeniť vzhľad prvkov, keď si prejdete kurzorom myši. Túto možnosť využijeme, že obraz pri vzniku myši stráca svoju transparentnosť:
Vyskúšať
Transparentnosť Pozadie
Existujú dva možné spôsoby, ako urobiť položku transparentné: vlastnosť opacity opísaná vyššie a označuje farbu pozadia vo formáte RGBA.
Možno ste už oboznámení s modelom farieb vo formáte RGB. RGB (červená, zelená, modrá - červená, zelená, modrá) - farebný systém, definujúci odtieň zmiešaním červenej, zelenej a modrej. Ak chcete napríklad nastaviť žltú farbu pre text, môžete použiť ktorúkoľvek z nasledujúcich reklám:
Farba: RGB (255,255,0); Farba: RGB (100%, 100%, 0);
Farby špecifikované pomocou RGB sa budú líšiť od hexadecimálnych hodnôt, ktoré používame predtým, čo vám umožní používať kanál transparentnosti alfa. To znamená, že cez pozadie prvku s transparentnosťou alfa bude vidieť, čo sa nachádza pod ním.
Oznámenie farby RGBA je podobné syntaxe so štandardnými pravidlami RGB. Avšak okrem iného budeme musieť deklarovať ako RGBA (namiesto RGB) a po farebnej hodnote v rozsahu v rozsahu od 0,0 (plná transparentnosť) na 1 (kompletná opacita).
Farba: RGBA (255,255,0,0,5); Farba: RGBA (100%, 100%, 0,0,5);
Rozdiel medzi vlastnosťou opacity a RGBA je, že vlastnosť opacity aplikuje transparentnosť na celý prvok celého prvku, to znamená, že celý obsah prvku sa stáva transparentným. A RGBA vám umožňuje nastaviť priehľadnosť na jednotlivé časti prvku (napríklad len text alebo pozadie):
Telo (ICPG) .PRIM1 (šírka: 400px; okraj: 30px 50px; na pozadí - farba: #fffffffff; hranice: 1px pevná čierna, font-hmotnosť: tučne; opacity: 0,5; pre IE8 a staršie verzie * / Text-ALIGN: Center;) .PRIM2 (šírka: 400px; okraj: 30px 50px; ; Text-ALIGN: Centrum;) Skúste »
Poznámka: Hodnoty RGBA nie sú podporované v prehliadači IE8 a starších verziách. Ak chcete vyhlasovať možnosť zálohovania pre staré prehliadače, ktoré nepodporujú hodnoty farieb s Alpha kanálmi, mali by ste ho najprv špecifikovať na hodnotu RGBA: pozadia: RGB (255,255,0); Pozadie: RGBA (255,255,0,0,5);
Účinok priesvitnosti prvku je dobre viditeľný na výkrese pozadia a distribúcia v rôznych operačných systémoch, pretože to vyzerá štýlové a krásne. Pri webovom dizajne sa aplikuje priesvitnosť a je dosiahnutá z dôvodu vlastnosti nepriehľadnosti alebo farebného formátu RGBA, ktorý je nastavený na pozadie.
Nehnuteľnosť
Hlavným rysom tejto nehnuteľnosti je, že hodnota transparentnosti pôsobí na všetky detské prvky vo vnútri, a nie len na pozadí. To znamená, že pozadie a text sa stanú priesvitným a zvýši úroveň transparentnosti, pridanie, nebude fungovať. V Tab. 1 ukazuje typ textu a pozadia s rôznymi hodnotami opacity.
Príklad 1 znázorňuje vytvorenie priesvitnej jednotky s použitím opacity.
Príklad 1. Pozadie na webovej stránke
HTML5 CSS3 IE 9+ CRO OP SA FX
Rgba
Zvyčajne by mal byť dizajn prvku priesvitný na dizajne a text je nepriehľadný, aby sa zachovala jeho čitateľnosť. Vlastnosť opacity sa tu nezmestí, pretože text vnútri prvku bude tiež čiastočne transparentný. Najlepšie je použiť formát RGBA, ktorej časť je alfa kanál alebo inými slovami, hodnota priehľadnosti. RGBA je napísaný ako hodnota, potom v zátvorkách cez čiarku, sú uvedené hodnoty červených, modrých a zelených zložiek farieb. Ten je transparentnosť, ktorá nastaví od 0 do 1 (obr. 1), zatiaľ čo 0 znamená úplnú priehľadnosť a 1 opacnosť farby.
Obr. 1. Syntax aplikácie RGBA
Príklad 2 Zobrazuje použitie formátu RGBA na vytvorenie priesvitného pozadia.
Príklad 2. priesvitné pozadie
HTML5 CSS3 IE 9+ CRO OP SA FX
Výsledok tohto príkladu je znázornený na obr. 2. Hodnota opacity pre pozadie je nastavená na 90%.
Obr. 2. priesvitné pozadie a nepriehľadný text
Priamo cez transparentnosť obrazu na pozadí (aspoň na rok 2016. roku) akýmkoľvek spôsobom prostredníctvom CSS (vrátane CSS 3) nebudete inštalovať. Existuje mnoho obtokových spôsobov, ako tento problém vyriešiť.
Miešanie pozadia
Najjednoduchším riešením je zmiešať dva pozadie (obrázky a priesvitnú farbu). Táto metóda je vhodná, ak je pod "transparentným obrazom pozadia" rovnakého typu pozadia, pretože Toto nie je transparentnosť vôbec a jeho imitácia na úkor miešania obrazu s farbou. Nainštalujte dvojité pozadie pozostávajúce z obrázku na pozadí a požadovanú farbu s alfa kanálom. Potom vyberte najvhodnejší miešací režim a alfa-kanálová farba nastavite kompozíciu na požadovaný výsledok.
Pozadie: URL ("/ Images / IMG1.jpg"), RGBA (255,255,255,0,9); Režim Blend-Mode: Farba;
Pridanie pseudo-element
Najlepší spôsob, ako dosiahnuť požadovaný. Vytvorte pseudo-prvok pomocou pseudo-triedy po. K dispozícii
#Main: Po (Obsah: ""; Displej: Blok; Poloha: Absolútna; TOP: 0; vľavo: 0; pozadia - obrázok: URL (/ WP-Content / Uploads / 2010/11 /Tandem.jpg); Šírka: 100%; výška: 100%; opacity: 0,2; Z-index: -1;)
CSS Transparency - Riešenie krížového prehliadača - 3.8 z 5 na základe 6 hlasov
V tejto lekcii sa pozrieme na Transparentnosť CSS, naučiť sa, ako dať rôzne prvky transparentnosti stránky a dosiahnuť kompletný krížový prehliadač, t.j. rovnakú prácu tohto efektu v rôznych prehliadačoch.
Ako nastaviť transparentnosť akéhokoľvek prvku
V CSS3 je vlastnosť opacity zodpovedná za vytváranie transparentných prvkov, ktoré môžu byť použité na akékoľvek položky. Táto vlastnosť má hodnoty od 0 do 1, ktoré určujú stupeň transparentnosti. Kde 0 je kompletná transparentnosť, (predvolená hodnota pre všetky prvky) a 1 úplná opacita. Hodnoty sú zaznamenané frakciami: 0,1, 0,2, 0,3, atď.
Príklad použitia:
Priehľadnosť krížového prehliadača
Nie všetky prehliadače sú rovnako vnímané a implementuje vyššie uvedenú nehnuteľnosť. V niektorých prípadoch je potrebné použiť iný názov vlastníctva alebo filtre.
Vlastnosť CSS3 opacity podporuje nasledujúce typy Mozilla 1.7 + prehliadačov, Firefox 0.9 +, Safari 1.2 +, Opera 9 +.
Taký dobrý :) prehliadač ako Internet Explorer až do verzie 9.0 nepodporuje vlastnosť opacity a vytvoriť transparentnosť pre tento prehliadač, musíte použiť vlastnosť filtra a alfa hodnota (opacity \u003d x), v ktorom X je Celé číslo v rozsahu od 0 do 100, s ktorými sa stanoví úroveň priehľadnosti. 0 je kompletná transparentnosť a 100 je kompletná opacita.
Pokiaľ ide o prehliadač Firefox na verziu 3.5, podporuje vlastnosť -Moz-opacity vlastnosť namiesto opacity.
Prehliadače, ako je Safari 1.1 a Konqueror 3.1, postavený na motore KHTML, používajte na kontrolu vlastnosti transparentnosti: -Khtml-opacita.
Ako nastaviť transparentnosť v CSS, takže to vyzerá vo všetkých prehliadačoch rovnako? Ak chcete vytvoriť riešenie krížového prehliadača pre transparentnosť prvkov, musia byť predpísané nielen jednu vlastnosť opacity a nasledujúce nastavenie vlastnosti:
filter: alfa (opacity \u003d 50); / * Transparentnosť pre IE * / -MOZ-nepriehľadnosť: 0,5; / * Podpora Mozilla 3.5 a pod * / -Khtml-opacita: 0,5; / * Podpora Konqueror 3.1 a Safari 1.1 * / Opacity: 0,5; / * Podpora všetkých ostatných prehliadačov * /
Transparentnosť rôznych prvkov
Zvážte niekoľko príkladov úlohy transparentnosti určitých prvkov, ktoré sa najčastejšie používajú na stránke.
Obrázky Transparency CSS.
Zvážte niekoľko možností na vytvorenie priesvitného obrazu. V nasledujúcom príklade nie je prvý obraz špecifikovaný transparentnosť, druhá má transparentnosť 50%, tretia 30%.
Výsledok:
Transparentnosť na CSS pri vzniku kurzora na obrázok.
Často je potrebné, aby sa v okamihu indukoval priehľadný obraz alebo iný prvok. Je možné to urobiť s CSS Pseudo-Class: Hover. Na tento účel, ktorý potrebujete, aby ste zaregistrovali dve triedy jedno normálne - to bude neaktívny stav obrazu a druhá trieda s Pseudolass: Hover, tu potrebujete špecifikovať priehľadnosť obrazu v čase kurzora.
Výsledok je možné zobraziť v demo.
Transparentnosť pozadia na CSS.
Tu je potrebné si uvedomiť, že transparentnosť sa vzťahuje na všetky vnorené prvky a nemôžu mať väčšiu transparentnosť ako priložený prvok.
Ako príklad, dávame možnosť s pozadím stránok vytvorenej pomocou obrázka a bloku s pozadím vytvoreným s farbou a transparentnosťou 50%.
Vzorový kód:
Tu je výsledok vyššie uvedeného kódu:
