Průhlednost značek: pravidlo CSS opacity

Návrh místa a jeho dialog s návštěvníky mohou být účinně provedeny s použitím efektu průhlednosti. Pravidlo opacity CSS umožňuje nastavit průhlednost obsahu značky od 0 do 1, to znamená z úplné průhlednosti do úplné opacity.

Transparentnost je zpravidla pravoúhlá. Ale pokud použijete pravidlo: barva pozadí: průhledná a tvar obrazu (například ve formátu * .png), který se liší od pravoúhlého, pak můžete dosáhnout téměř jakéhokoli účinku.

Syntaxe pravidla pro průhlednost

Použití konstrukce: opacita: 0,4 - v popisu stylu nebo třídy identifikátoru je transparentnost štítku, na který jsou aplikovány, 40%. Hodnota průhlednosti stylu je zapsána s číslem od 0 do 1. Dolní okraj znamená úplnou průhlednost, tj. Značka nebude viditelná a horní okraj je plná opacita, to znamená, že vše, co je pod značkou, nebude viditelné.

Všimněte si, že pravidlo opacity CSS ovlivňuje pozadí (barvu, obrázek) a rámeček a text ve značce. Vzhledem k tomu, dialogové okno je vhodné oddělit jeho pozadí od textu na něm (vytvořit různé styly pro tyto prvky) nebo vybrat barvy, které vypadají dobře proti obecnému pozadí stránky na zvolené úrovni průhlednosti.

Průhledný prvek viditelnosti

Dokonce i když je průhlednost nula, to znamená, že prvek je neviditelný, je přítomen v okně prohlížeče a může generovat události.

V tomto případě značka s jahodou má značku ve tvaru kruhu s motýlkem a v ní je značka s textem Klepněte na mě! Průhlednost tagu s motýlem je 0,5 a text 1 je text zcela neprůhledný.

Pokud v textovém tagu nastavíte obslužnou rutinu události, například na kliknutí, bez ohledu na to, jakou úroveň průhlednosti má tato značka, vždy bude klepnutí na její umístění.

Použití zásady průhlednosti

Logika uplatňování pravidla průhlednosti v klasickém kvalitě CSS pozadí, opacity = 0,3 - 0,5: zpráva nebo dialogové okno se objeví nad obecným pozadím stránky, jen jej pokrývá a vede dialog s návštěvníkem. Tato praxe se již stala obvyklým, že místo bez této funkce již není považováno za moderní.

Mezitím pravidlo transparentnosti má jiné využití. Především je to animace: jak pomocí pravidel CSS, tak i kódem JavaScript. První možnost je vhodnější, například změnou opacity CSS v rámcích @keyframes použitých v pravidlech animace CSS, můžete rychle a efektivně animovat tlačítko nabídky, logo společnosti nebo jakýkoli jiný štítek ve smyslu obsahu webu.

Používání různých úrovní průhlednosti ve značkách na sobě navzájem vám umožní vytvořit originální vizuální efekty. Bohužel průhlednost zařízení, která nepodporují myš, neumožňuje odhalit některé zajímavé vizuální nápady, ale pokud používáte opožděné pravidlo CSS opacity, může být například pohyb prstů na obrazovce smartphonu také neočekávaně animován.