CSS opacity property: kontrola průhlednosti

Chcete-li ovládat průhlednost prvků stránky, použijte vlastnost opacity CSS. Podle specifikace je použitelný pro uzly jakéhokoliv typu a je podporován ve všech moderních prohlížečích. S jeho pomocí můžete vytvořit zajímavý design nebo implementovat pohodlnou interaktivní interakci s uživatelem.

Možné hodnoty

Syntaxe vlastností opacity v css vypadá takto:

volič {opacity: 1-} volič {opacity: 0-} volič {opacity: 0.4-}

Vstup přijímá číselné hodnoty v rozmezí od 0 do 1. Parametr může být zlomek jednotky, zatímco bodka je použita jako oddělovač celé a částečné části v CSS.

Element s nulovou průhledností se stává neviditelným, ale stále nadále zaujímá jeho místo na stránce a zachovává schopnost interagovat s uživatelem.

Pokud se hodnota nemovitosti liší od nuly, pak se skutečná průhlednost vypočítá jako procento nějaké horní hranice. V obvyklé situaci opacita: 1 určuje plnou opacitu prvku.

Transparentnost dětských uzlů

Pokud má však prvek rodiče, jehož průhlednost se liší od jednoty, výpočet se změní. Potomník nemůže být "méně průhledný" než kterýkoli z jeho předchůdců. Vlastnost CSS opacity nadřazeného bloku se stává horní hranicí průhlednosti podřízeného uzlu.

parent {opacity: 0.7-} dítě {opacity: 1-}

V takové situaci bude prvek dítěte 30% průhledný, i když hodnota opacity je jedna.

Příklady použití

Příklad 1. Průsvitnost. Je nutné, aby pod cílovým prvkem bylo vidět hlavní pozadí bloku.

.cíl {pozadí: černá opacita: 0,5-}

Transparentní je nejen pozadí cílového bloku, ale i text.

Příklad 2. Dynamické řízení průhlednosti. Hodnota vlastností CSS cílového bloku se změní podržením kurzoru na něm.

.cíl {opacity: 0,2 -}. cíl: hover {opacity: 1-}

Dynamická průhlednost

Poslední příklad ukazuje, že průhledné prvky nadále reagují na události na stránce, například na kurzoru. To vám umožní používat jаvascript pro ovládání vlastností CSS opacity a také použít přechodové a animační mechanismy pro plynulou změnu režimu zobrazení.

Chcete-li získat přístup k průhlednosti ze skriptu, musíte se obrátit na objekt stylu daného prvku.

// Získejte aktuální hodnota prozrachnostivar neprůhlednost = element.style.opacity - // nastavení nové znacheniyaelement.style.opacity = 0.4-

Hladké zmizení bloku lze implementovat pomocí přechodu vlastností CSS:

prvek {opacity: 0,1-přechod: opacity 1000ms-} prvek: hover {opacity: 0,8-přechod: opacity 2000ms-}

Nyní uzel prvku změní průhlednost z 10 na 80% na jednu sekundu při podržení myši a po zmizení kurzoru do dvou sekund zmizí původní hodnota.

Vlastnost opacity CSS v kombinaci s přechodovým mechanismem umožňuje vytvářet krásné efekty.

Alfa kanál místo opacity

Hlavní jemnosti mechanizmu opacity v CSS:

• jeho činnost se rozšiřuje nejen na pozadí bloku, ale také na jeho textový obsah, který je vhodnější ponechat jasné;
• podřízené prvky nemohou být méně transparentní než mateřské.

Pokud se tyto účinky komplikují život kodér, namísto neprůhlednosti, použít průhledné pozadí, stanovení jeho hodnoty ve formátu RGBA nebo HSLA.