Proprietatea de opacitate CSS: controlul transparenței

Pentru a controla transparența elementelor de pagină, utilizați proprietatea de opacitate CSS. Conform specificațiilor, este aplicabil nodurilor de orice tip și este acceptat în toate browserele moderne. Cu ajutorul acestuia puteți crea un design interesant sau puteți implementa o interacțiune interactivă convenabilă cu utilizatorul.

Valori posibile

Sintaxa proprietății de opacitate din css arată astfel:

selector {opacitate: 1-} selector {opacitate: 0-} selector {opacitate: 0.4-}

Intrarea acceptă valori numerice în intervalul de la 0 la 1. Parametrul poate fi o fracțiune a unei unități, în timp ce punctul este folosit ca separator al întregii și fracționării în CSS.

Un element cu transparență zero devine invizibil, dar continuă să ocupe locul său pe pagină și își păstrează capacitatea de a interacționa cu utilizatorul.

Dacă valoarea proprietății diferă de zero, atunci transparența efectivă va fi calculată ca procent din limita superioară. În situația obișnuită, opacitatea: 1 specifică opacitatea completă a elementului.

Transparența nodurilor copilului

Cu toate acestea, dacă elementul are un părinte a cărui transparență diferă de unitate, calculul se modifică. Un descendent nu poate fi "mai puțin transparent" decât oricare dintre strămoșii săi. Proprietatea CSS a opacității blocului părinte devine limita superioară a transparenței nodului copil.

părinte {opacitate: 0.7-} copil {opacitate: 1-}

Într-o astfel de situație, elementul copil va fi transparent de 30%, chiar dacă valoarea opacității este una.

Exemple de utilizare

Exemplul 1. Translucența. Este necesar ca sub elementul țintă să se vadă fondul principal al blocului.

.țintă {fundal: negru-opacitate: 0,5-}

Transparent nu este doar fundalul blocului țintă, ci și textul.

Exemplul 2. Gestionarea transparenței dinamice. Valoarea proprietății CSS a blocului țintă se modifică prin mutarea cursorului pe ea.

.țintă {opacitate: 0,2 -}. țintă: hover {opacity: 1-}

Transparență dinamică

Ultimul exemplu demonstrează că elementele transparente continuă să răspundă evenimentelor de pagină, cum ar fi poziționarea cursorului. Acest lucru vă permite să utilizați jаvascript pentru a controla proprietatea CSS opacitate, și să aplice mecanisme de tranziție și animație pentru a schimba lin modul de afișare.

Pentru a accesa transparența dintr-un script, trebuie să te referi la obiectul de stil al unui anumit element.

// obține valoarea curentă a transparenței var opacity = element.style.opacity - // setați noua valueelement.style.opacity = 0.4-

Dispariția lină a blocului poate fi implementată utilizând tranziția proprietății CSS:

element {opacitate: 0.1-tranziție: opacitate 1000ms-} element: hover {opacitate: 0.8-tranziție: opacitate 2000ms-}

Acum, nodul elementului va schimba transparența de la 10 la 80% pentru o secundă în timp ce se deplasează mouse-ul și când cursorul dispare, va scădea la valoarea inițială în două secunde.

Proprietatea de opacitate CSS în combinație cu mecanismul de tranziție vă permite să creați efecte frumoase.

Canalul Alpha în loc de opacitate

Principalele subtilități ale mecanismului de opacitate din CSS:

• acțiunea sa se extinde nu numai pe fondul blocului, ci și pe conținutul său text, care este preferabil să fie lăsat clar;
• elementele copilului nu pot fi mai puțin transparente decât cele părinte.

În cazul în care aceste efecte complica codor de viață, în loc de opacitate, utilizați un fundal transparent, determinarea valorii sale în format RGBA sau HSLA.