Vlastnosť opacity sa používa na vytvorenie efektu transparentnosti v CSS.
Prehliadače IE8 a staršie verzie podporujú alternatívnu vlastnosť - filter: alpha (opacity = x), kde „x“ môže mať hodnotu od 0 do 100, čím nižšia je hodnota, tým bude prvok transparentnejší.
Všetky ostatné prehliadače podporujú štandardnú vlastnosť nepriehľadnosti CSS, ktorá môže mať hodnotu od 0,0 do 1,0, čím nižšia hodnota, tým bude prvok transparentnejší:
Skús "Ukážte na transparentnosť
Pseudotrieda: hover vám umožňuje zmeniť vzhľad prvky, keď na ne umiestnite kurzor myši. Túto príležitosť využijeme na to, aby obrázok po umiestnení kurzora myši stratil svoju transparentnosť:
Skús "Transparentnosť pozadia
Existujú dva možné spôsoby urobiť prvok transparentným: vlastnosť nepriehľadnosti opísaná vyššie a určenie farby pozadia vo formáte RGBA.
Model s farebnou reprezentáciou RGB už možno poznáte. RGB (červená, zelená, modrá - červená, zelená, modrá) - systém farieb, ktorý určuje odtieň zmiešaním červenej, zelenej a modré kvety... Na nastavenie farby textu na žltú môžete napríklad použiť ktorékoľvek z nasledujúcich vyhlásení:
Farba: rgb (255,255,0); farba: rgb (100%, 100%, 0);
Farby špecifikované pomocou RGB sa budú líšiť od hexadecimálnych hodnôt, ktoré sme použili predtým, v tom, že umožňujú použitie kanála priehľadnosti alfa. To znamená, že pozadie prvku s alfa priehľadnosťou ukáže, čo je pod ním.
Deklarácia farieb RGBA je syntaxou podobná štandardným pravidlám RGB. Okrem iného však musíme hodnotu deklarovať ako RGBA (namiesto RGB) a nastaviť ďalšiu desatinnú hodnotu pre priehľadnosť za hodnotou farby v rozsahu od 0,0 (úplne priehľadná) do 1 (úplne nepriehľadná).
Farba: rgba (255,255,0,0,5); farba: rgba (100%, 100%, 0,0,5);
Rozdiel medzi vlastnosťou opacity a RGBA je v tom, že vlastnosť opacity aplikuje transparentnosť na celý prvok, to znamená, že celý obsah prvku sa stáva transparentným. RGBA vám umožňuje nastaviť priehľadnosť jednotlivých častí prvku (napríklad iba textu alebo pozadia):
Text (obrázok na pozadí: adresa URL (img.jpg);) .prim1 (šírka: 400 pixelov; okraj: 30 pixelov 50 pixelov; farba pozadia: #ffffff; orámovanie: 1 pixel plná čierna; hmotnosť písma: tučné; nepriehľadnosť: 0,5; filter : alfa (nepriehľadnosť = 70); / * pre IE8 a staršie * / zarovnanie textu: stred;) .prim2 (šírka: 400 pixelov; okraj: 30 pixelov 50 pixelov; farba pozadia: rgba (255 255 255,0,5); orámovanie: 1 pixel plný čierna; hmotnosť písma: tučné; zarovnanie textu: stred;) Skúste to "
Poznámka: Hodnoty RGBA nie sú podporované v IE8 a starších verziách. Ak chcete deklarovať záložnú farbu pre staršie prehliadače, ktoré nepodporujú hodnoty farieb pomocou kanálov alfa, zadajte ju najskôr pred hodnotou RGBA: background: rgb (255,255,0); pozadie: rgba (255,255,0,0,5);
Niekedy je potrebné to urobiť priehľadné pozadie pre konkrétny blok na stránke. Tento efekt je možné dosiahnuť vytvorením priehľadného obrázka na pozadí vo formáte * .png a jeho nastavenie prostredníctvom nehnuteľnosti pozadie: url („./ images / fon.png“);.
Použitie vlastnosti OPACITY
Prečo také ťažkosti, ak sa to dá urobiť pomocou CSS... Vytvorme hlavný blok na stránke ( stránku) a vnorený blok ( blok), na ktoré nastavíme transparentnosť. Kompatibilita medzi prehliadačmi sa dosahuje nasledovne: vlastnosť pre internet Explorer – filter: alfa (nepriehľadnosť = 50) (hodnota priehľadnosti v rozsahu od 0 do 100), pre prehliadače podporujúce štandard CSS3 - krytie: 0,5 (číslo v rozsahu 0,0 až 1,0).
HTML kód:
Priehľadné pozadie bloku.
Výsledok:
Priehľadné pozadie bloku
Ako vidíte, transparentnosť platí pre všetko detské prvky
Priehľadné pozadie bloku
v DIV s triedou blok a nemôžu prekročiť hodnotu transparentnosti svojho rodiča. To znamená, že všetko v tomto bloku sa stane transparentným. Čo keď chcete nechať priehľadné pozadie iba pre div?Použitie vlastnosti BACKGROUND-COLOR
V hárku štýlov CSS musíme vykonať určité zmeny, konkrétne nahradiť blok DIV s triedou blok nehnuteľnosť nepriehľadnosť za nehnuteľnosť farba pozadia.
Div.block (šírka: 260px; výška: 140px; horný okraj: 79px; ľavý okraj: 94px; orámovanie: 1px plné # 333333; / * iba priehľadné pozadie DIV.block * / farba pozadia: rgba (255, 255 , 255, 0,5); / * Farba pozadia, priehľadnosť 0,5 * /)
Výsledok:
Priehľadné pozadie bloku
Vo vyššie uvedenom príklade sa používa pre farbu a pozadie Formát RGBA ... Kde, prvé tri písmená znamenajú červená, zelená, Modrá (Červená, zelená, Modrá), druhé symbolizuje alfa kanál (a) a sady transparentnosť b prvok z 0.0 predtým 1.0 .
Farba pozadia: rgba (r, g, b, a);
V zátvorkách je namiesto písmen hodnota farebnej zložky zobrazená v ľubovoľnom grafický editor, napríklad Paint.Net(snímka obrazovky). Posledná hodnota a nastavuje transparentnosť a zhoduje sa s hodnotou majetku nepriehľadnosť.
http://cp77.comxa.com/verstka/css-transparent-fon
Popis
Určuje úroveň priehľadnosti prvku webovej stránky. S čiastočnou alebo úplnou transparentnosťou sa prvok zobrazí obrázok na pozadí alebo iné prvky pod priesvitným predmetom.
Syntax
nepriehľadnosť: hodnota
Hodnoty
Hodnota je číslo z rozsahu. Hodnota 0 zodpovedá úplnej transparentnosti prvku a 1 naopak jeho nepriehľadnosti. Zlomkové čísla ako 0,6 nastavujú priesvitnosť. Je dovolené zapisovať čísla bez počiatočnej nuly, napríklad ako 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žívania nepriehľadnosti
Prehliadače
Firefox pred 3.5 podporuje neštandardnú vlastnosť -moz-opacity.
Internet Explorer až do verzie 9.0 používa na zmenu priehľadnosti filtre, pre tento prehliadač by ste mali napísať filter: alpha (opacity = 50), kde parameter opacity môže mať hodnotu od 0 do 100.
Chiiiiix!
Tu je to, čo som si myslel, nemal by som písať o vlastnosti transparentnosti pre 3. CSS? Áno, teraz bude mojim smerom lietať veľa replík, že o tejto nehnuteľnosti už každý vie! Ha, nie! Som si istý, že nie všetci.
Zapnuté tento moment väčšina najnovšie verzie moderné prehliadače už podporujú CSS 3 ( !!! Dokonca IE 9 !!!). Už sa teda môžete pokúsiť implementovať tieto vlastnosti do kódov svojich stránok.
A tak späť k majetku “ nepriehľadnosť“, čo dáva zaujímavý efekt, bez rušenia grafiky, stačí napísať 1 riadok kódu.
Čo je to „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 môžeme vidieť obrázok na pozadí alebo iný prvok, ktorý bude umiestnený pod prvkom, ktorý je nastavený na priehľadnosť. Pohodlné, nie?"
Na svojom blogu mám niekoľko prvkov, ktorým je táto vlastnosť priradená. Živý príklad môžete vidieť, keď prejdete do spodnej časti bočného panela, kde je sekcia „ Priatelia". Kresba je matná, však? Teraz na ňu ukážte myšou. Jasnejšie, nie?)
Teraz vám podrobnejšie poviem, ako sa to pre mňa implementuje.
Pre prvok musíme nastaviť predvolenú priehľadnosť. To znamená, že prvok bude vyzerať trochu nudne. Krytie som nastavil na 70%. Pretože však všetky prehliadače chápu kód inak, musíme napísať generický 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 verzie 8 a 9):
Filter: alfa (nepriehľadnosť = X);
kde " X"- hodnota v rozsahu od 0 (úplná transparentnosť prvku) na 100 (nepriehľadnosť prvku).
Myimage (opacita: 0,7; filter: alfa (opacita = 70);)
Teraz nastavme pravidlá pre prvok, keď sa nad ním pohybuje kurzor myši. Musíme vidieť jasné zobrazenie prvku, a preto som nastavil 100% nepriehľadnosť, to znamená, že prvok vyzerá tak, ako v skutočnosti je:
Moja fotka: vznášať sa (opacita: 1,0; filter: alfa (opacita = 100);)
Tu je niekoľko príkladov:
Priehľadnosť fotografií100 (1.0), to znamená, že neexistuje žiadna transparentnosť
Priehľadnosť fotografií70 (0.7)... Viacfarebné kruhy - to je obrázok, ktorý „prerazí“, ktorý sa nachádza na pozadí, t.j. pod fotkou
Existujú tri spôsoby, ako zmeniť transparentnosť prvku v CSS:
pomocou vlastnosti opacity,
pomocou funkcie rgba (),
pomocou funkcie hsla ().
1. Vlastnosť nepriehľadnosti
Vlastnosť nepriehľadnosť vám umožňuje čiastočne alebo úplne sprehľadniť akýkoľvek prvok webovej stránky. Táto vlastnosť mení priehľadnosť prvkov, ktoré majú obrázok na pozadí (obrázok) alebo pozadie s farbou alebo prechodom. Ak prvok, pre ktorý je použitá vlastnosť opacity, obsahuje ešte ďalšie prvky v ňom, potom tiež zmenia svoju nepriehľadnosť.
Vlastnosť opacity sa pohybuje od 0 (úplne priehľadná) do 1 (nepriehľadná), napríklad:
H1 (farba: # CD6829;) div (pozadie: # CDD6DB; nepriehľadnosť: 0,3;) 
Ryža. 1. Transparentnosť prvkov využívajúcich nepriehľadnosť
2. Funkcia rgba ()
Farebný model RGBA vytvára farebný nádych zmiešaním v požadovaných pomeroch červená (červená), zelená (zelená) a modrá (modrá) farby a alfa kanál (alfa) je zodpovedný za stupeň priehľadnosti farby. Na rozdiel od vlastnosti opacity, pre blok obsahujúci ďalšie prvky, funkcia rgba () zmení iba opacitu bloku.
Ryža. 2. RGB farebný model h1 (farba: # CD6829;) div (pozadie: rgba (205, 214, 219, 0,3);) 
Ryža. 3. Transparentnosť prvkov pomocou funkcie rgba () 3. Funkcia hsla ()
Hsla () funkcia, ktorej parametre znamenajú tón (odtieň), sýtosť, jas (ľahkosť) a alfa kanál (alfa), tiež umožňuje nastaviť polopriehľadnú farbu.
Farebné odtiene sú určené v percentách pomocou zodpovedajúcej hodnoty z farebného kolieska. Samotný kruh je rozdelený na sektory, na ktorých hraniciach sú primárne farby:
0/360 ° - červená
60 ° - žltá
120 ° - zelená
180 ° - modrá
240 ° - modrá
270 ° - fialová
300 ° je purpurová.
Ak chcete získať čiernu farbu, musíte nastaviť hodnoty odtieňa, sýtosti a jasu na nulu - hsla (0, 0%, 0%, 1). Biela sa získa pri 100%jasu hsla (0, 0%, 100%, 1) a sivá sa získa pri nulovej saturácii hsla (0, 0%, 50%, 1).