Tento článok vám predstaví koncept, ktorý vám pomôže pochopiť neprehľadnosť v systéme Windows a povie vám, ako tento parameter ovládať. V tomto článku sa budeme zaoberať nasledujúcimi ukazovateľmi,
- Nepriehľadnosť v CSS
- Nepriehľadnosť zdedená kaskádovými prvkami
- Nastavenie atribútu RGBA pre kaskádové prvky
- Zmeny krytia pri efekte vznášania
Nepriehľadnosť pozadia prvku je užitočné nastavenie funkcií v dizajne HTML. Nastavením úrovne nepriehľadnosti (inverznej hodnoty priehľadnosti) môže návrhár riadiť viditeľnosť prvku pomocou vlastnosti nepriehľadnosti CSS. Spravidla sa používa ako nastavenie pozadia, keď sú kaskádové prvky umiestnené jeden nad druhým.
Najbežnejší scenár, v ktorom sa táto funkcia používa, je tento:
- Čiastočne priehľadný obrázok na pozadí je umiestnený za textovým prvkom.
- Obrázok na pozadí je zakalene viditeľný, takže nedominuje nad textom vpredu.
- Obrázok sa môže úplne zaostriť, keď sa používateľ výslovne rozhodne ho vidieť.
Možno budete chcieť prečítať ďalej predtým, ako sa dozviete o nepriehľadnosti CSS.
Komplexný návod k CSS nájdete na Výukový program pre CSS Edureka pre začiatočníkov . Dostanete vynikajúci prehľad o tom, ako sa má CSS používať na vylepšenie webového dizajnu HTML.
Pokračujeme týmto článkom o nepriehľadnosti v CSS
Nepriehľadnosť v CSS
V CSS je nepriehľadnosť nastavená ako číselná hodnota v rozmedzí od 0,0 do 1,0. Hodnoty bližšie k nule predstavujú väčšiu priehľadnosť, obraz bude dobre viditeľný. Začnime príkladom obrázka s 50% priehľadnosťou. Pozri príklad 1 nižšie.
Príklad 1: Obrázok na pozadí nastavený na polo- transparentnosť
img {opacita: 0,5 filter: alfa (opacita = 50) / * pre IE8 a staršie * /} 
Príklad 1: Výstup
Originálny obrázok (100% nepriehľadnosť)
Obrázok s 50% nastavením krytia
Vo vyššie uvedenom príklade bol iba jeden prvok - obrázok. Pomocou parametra nepriehľadnosti je možné nastaviť aj ďalšie prvky, ako napríklad text, prvky div a podobne.
Pokračujeme týmto článkom o nepriehľadnosti v CSS
Nepriehľadnosť zdedená kaskádovými prvkami
Ak sú prvky naskladané jeden nad druhým, ak má prvok pozadia nastavenie nepriehľadnosti, potom ho dedia všetky podradené prvky. To je predvolené nastavenie . To znamená, že ak je na obrázok umiestnené textové pole a obrázok má nastavenie nepriehľadnosti 0,5, bude obrazový aj textový prvok viditeľný iba čiastočne.
Vezmime si inštanciu podradeného textového prvku umiestneného nad obrázkom TOM & JERRY v našom ďalšom príklade. Vidíme predvolený efekt nepriehľadnosti v príklade 2.
.kontajner {pozícia: relatívne zarovnanie textu: stredná nepriehľadnosť: 0,5}. centrovaná {pozícia: úplne hore: 50% vľavo: 50% transformácia: preložiť (-50%, -50%) farba: modrá veľkosť písma: 40px} } TOM & JERRYPríklad 2: Text dedí nepriehľadnosť z nadradeného obrázka
Pokračujeme týmto článkom o nepriehľadnosti v CSS
Nastavenie atribútu RGBA pre kaskádové prvky
Existuje ďalší spôsob, ktorým sa dá krytie riadiť pomocou kaskádových prvkov. Ak chcete, aby podradený prvok zostal nedotknutý nepriehľadnosťou jeho elementu pozadia, môžete použiť Nastavenie atribútu RGBA .
Príklad 3: Použitie nastavenia RGBA
pozadie: rgba (76, 175, 80, 1,0) / * Obrázok nemá nastavenie nepriehľadnosti * / / * Zelené pozadie pre text so 100% krytím * / / * Text v modrej farbe má 100% krytie * /
pozadie: rgba (76, 175, 80, 0,4) / * Obrázok nemá nastavenie nepriehľadnosti * / / * Zelené pozadie pre text so 40% krytím * / / * Modrý text je stále viditeľný so 100% krytím * /
ako používať parametre v tablo
Po farebnom kóde RGB je atribút ‘a’ skratkou alfa . The alfa parameter je číslo medzi 0,0 (úplne transparentné) a 1,0 (úplne nepriehľadné).
Pokračujeme týmto článkom o nepriehľadnosti v CSS
Zmeny krytia pri efekte vznášania
V niektorých scenároch chcú weboví dizajnéri chcieť, aby sa nepriehľadnosť líšila v závislosti od toho, či je používateľ zameraný na prvok alebo nie. Povedzme napríklad, že obrázok je predvolene nastavený na 50% krytie. Keď však používateľ umiestni kurzor myši na obrázok, chceme, aby bol obrázok plne zaostrený so 100% krytím.
Príklad 4 ukazuje, ako sa to deje.
Spoločné poznámky:
- Nastavenie nepriehľadnosti je alternatívou k použitiu atribútu ‘viditeľnosť’ v CSS. Použitie nastavenia nepriehľadnosti však uľahčuje nastavenie rôznych stupňov priehľadnosti, od nuly po úplnú.
- Úroveň nepriehľadnosti sa nastavuje po dôkladnom vyskúšaní v rôznych prehľadávačoch. Ak je nepriehľadnosť nastavená na nízke hodnoty, text alebo obrázok sa niekedy môžu stať úplne neviditeľnými alebo nečitateľnými.
- Myšlienkou použitia nepriehľadnosti je ostré zameranie na niektoré prvky, zatiaľ čo iné prvky pozadia nerozptyľujú pozornosť používateľa. Takže také prvky pozadia sú nastavené s nižšou nepriehľadnosťou.
- V Internet Exploreri pre IE8 a staršie verzie je vlastnosť nepriehľadnosti nastavením „filtra“ v rozmedzí od 1 do 100. Vo všetkých ostatných prehľadávačoch je v rozsahu od 0 do 1.
Týmto sa dostávame na koniec tohto článku o Opacity In CSS.
Ak sa chcete dozvedieť viac informácií o vývoji webových aplikácií, pozrite si stránku od Edureka. Osvedčenie o školení v oblasti vývoja webu vám pomôže Naučte sa, ako vytvárať pôsobivé webové stránky pomocou rozhraní HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a ako ich nasadiť do služby Amazon Simple Storage Service (S3).
Ak stále máte záujem Ak máte akékoľvek otázky, môžete ich uverejniť v sekcii komentárov tohto blogu „Opacity In CSS“ a my sa vám ozveme čo najskôr.