Proprietatea CSS de opacitate este utilizată pentru a controla transparența elementelor paginii. Prin specificații, se aplică oricărui tip de nod ș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 opacitate din CSS arată astfel:

Selector (opacitate: 1;) selector (opacitate: 0;) selector (opacitate: 0,4;)

Sunt acceptate ca intrare valori numerice cuprinse între 0 și 1. Parametrul poate fi o fracțiune de unul, iar un punct este utilizat ca separator pentru părți întregi și fracționate în CSS.

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

Dacă valoarea proprietății este diferită de zero, atunci transparența reală va fi calculată ca procent din limita superioară. În mod normal, opacitatea: 1 determină opacitatea completă a elementului.

Transparența nodurilor copil

Cu toate acestea, dacă elementul are un părinte a cărui transparență diferă de unul, calculul se schimbă. Un descendent nu poate fi „mai puțin transparent” decât oricare dintre strămoșii săi. Valoarea opacității blocului părinte devine limita superioară a opacității copilului.

Părinte (opacitate: 0,7;) copil (opacitate: 1;)

În această situație, elementul copil va fi 30% transparent, chiar dacă opacitatea este setată la unul.

Exemple de utilizare

Exemplul 1. Transluciditate. Este necesar ca fundalul principal al blocului să fie vizibil sub elementul țintă.

Țintă (fundal: negru; opacitate: 0,5;)

Nu numai fundalul blocului țintă devine translucid, ci și textul.

Exemplul 2. Controlul dinamic al transparenței. Valoarea proprietății de opacitate CSS a blocului țintă se modifică atunci când treceți cu mouse-ul peste acesta.

Țintă (opacitate: 0,2;). Țintă: plasați (opacitate: 1;)

Transparență dinamică

Ultimul exemplu demonstrează că elementele transparente continuă să răspundă la evenimentele din pagină, cum ar fi hover. Acest lucru vă permite să utilizați javascript pentru a controla proprietatea opacității CSS, precum și să utilizați mecanisme de tranziție și animație pentru a schimba fără probleme modul de afișare.

Pentru a accesa transparența din script, trebuie să vă referiți la obiectul de stil al unui anumit element.

// obține opacitatea curentă var opacitate \u003d element.style.opacity; // setează o valoare nouă element.style.opacity \u003d 0,4;

Decolorarea unui bloc poate fi implementată utilizând proprietatea CSS de tranziție:

Element (opacitate: 0,1; tranziție: opacitate 1000ms;) element: hover (opacitate: 0,8; tranziție: opacitate 2000ms;)

Acum, nodul elementului va schimba opacitatea de la 10 la 80% la trecerea mouse-ului într-o secundă și, atunci când cursorul pleacă, va dispărea la valoarea inițială în două secunde.

Proprietatea CSS de opacitate, combinată cu mecanismul de tranziție, vă permite să creați efecte frumoase.

Canal alfa în loc de opacitate

Principalele subtilități ale mecanismului de opacitate în CSS:

• efectul său se extinde nu numai la fundalul blocului, ci și la conținutul său text, care este de preferat să fie clar;
• elementele copil nu pot fi mai puțin transparente decât elementele părinte.

Dacă aceste efecte îngreunează viața proiectantului, în loc de opacitate, ar trebui să utilizați pur și simplu un fundal transparent, specificându-i valoarea în format RGBA sau HSLA.

CSS3 definește o proprietate de opacitate pentru aplicarea transparenței elementelor paginii. Valoarea acestei proprietăți este un număr cuprins între 0,0 și 1,0. Când valoarea este egală cu zero, elementul devine complet transparent, iar atunci când valoarea este egală cu una, în consecință, este complet opac. Proprietatea poate fi aplicată oricărui element de pe pagină.

Img1 (opacitate: 0,2;) .img2 (opacitate: 0,5;) .img3 (opacitate: 1,0;)

Pentru a seta transparența prin utilizarea scriptului: object.style.opacity

Vechile Mozilla și Firefox 0.8 își folosesc propriul nume pentru această proprietate: -moz-opacity Pentru a seta transparența printr-un script, utilizați: object.style.MozOpacity

Safari 1.1, Konqueror 3.1 - construit pe motorul KHTML, utilizați proprietatea pentru a controla transparența: -khtml-opacity Pentru a seta transparența printr-un script, utilizați: object.style.KhtmlOpacity

Safari folosește opacitatea CSS3 de la versiunea 1.2, dar Konqueror mai vechi decât versiunea 3.1, după ce a încetat să mai accepte -khtml-opacitate, nu a introdus suport pentru opacitatea CSS3.

Internet Explorer de la versiunea 5.5 și până la cea mai recentă versiune a Internet Explorer 7, implementează transparența prin filtrul Alpha DirectX. Trebuie remarcat faptul că acest filtru folosește o valoare de transparență în intervalul de la 0 la 100 (nu de la 0,0 la 1,0). De asemenea, rețineți că filtrul poate fi aplicat numai unui element cu înălțime sau lățime sau poziție setată la absolut, sau writingMode cu valoare tb-rl sau contentEditable setat la true.

Exemplu (setați transparența la jumătate):

Img1 (filtru: progid: DXImageTransform.Microsoft.Alpha (opacitate \u003d 50);) / * IE5.5 + sintaxă (preferată) * / .img2 (filtru: alfa (opacitate \u003d 50);) / * Sintaxă IE4 * / To setați transparența prin script, utilizați: object.style.filter \u003d "progid: DXImageTransform.Microsoft.Alpha (șir de parametri)"

Pentru a obține o transparență similară cu cea a W3C, utilizați valoarea "opacitate \u003d un număr de la 0 la 100" ca șir de parametri.

Cum să funcționeze în toate browserele:

filtru: progid: DXImageTransform.Microsoft.Alpha (opacitate \u003d 50); / * IE 5.5 + * / -moz-opacitate: 0,5; / * Mozilla 1.6 și mai jos * / -khtml-opacitate: 0,5; / * Konqueror 3.1, Safari 1.1 * / opacitate: 0,5; / * CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 * /

Javascript

function setElementOpacity (sElemId, nOpacity) (var opacityProp \u003d getOpacityProperty (); var elem \u003d document.getElementById (sElemId); if (! elem ||! opacityProp) return; // Dacă nu există niciun element cu id-ul specificat sau browserul nu există nu acceptă niciuna dintre funcțiile cunoscute ale modalităților de control al transparenței dacă (opacityProp \u003d\u003d "filtru") // Internet Exploder 5.5+ (nOpacity * \u003d 100; // Dacă transparența este deja setată, schimbați-o prin colecția de filtre, altfel adăugați transparență prin style.filter var oAlpha \u003d elem.filters ["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity \u003d nOpacity; else elem.style.filter + \u003d "progid : DXImageTransform.Microsoft.Alpha (opacity \u003d "+ nOpacity +") "; // Pentru a nu suprascrie alte filtre folosiți" + \u003d ") else // Alte browsere elem.style \u003d nOpacity;) funcția getOpacityProperty () (dacă (typeof document.body.style.opacity \u003d\u003d "șir") // Conform CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) returnează "opacitate"; altceva if (typeof document.body.style.MozOpacity \u003d\u003d "șir") // Mozilla 1.6 și versiuni anterioare, Firefox 0.8 returnează "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity \u003d\u003d "șir") // Konqueror 3.1, Safari 1.1 returnează "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match (/ MSIE ([\\ d.] +); /)\u003e \u003d 5.5) // Internet Exploder 5.5+ returnează "filtru"; returnează fals; // fără transparență)

Creați fundal transparent în HTML și CSS (opacitate și efecte RGBA)

Efect de transluciditate elementul este clar vizibil în imaginea de fundal și a devenit răspândit în diferite sisteme de operare, deoarece arată elegant și frumos. Principalul lucru nu este să ai un model monocromatic sub blocurile translucide, ci o imagine, în acest caz transparența devine vizibilă.

Acest efect se obține într-o varietate de moduri, inclusiv tehnici de modă veche, cum ar fi utilizarea unei imagini PNG ca fundal, crearea unei imagini în carouri și opacitate. Dar de îndată ce devine necesar să se facă un fundal translucid într-un bloc, aceste metode au dezavantaje neplăcute.

Luați în considerare transluciditatea textului și a fundalului - cum să îl utilizați corect în proiectarea site-ului web:

Principala caracteristică a acestei proprietăți este că valoarea transparenței afectează toți copiii din interior, nu doar fundalul. Aceasta înseamnă că atât fundalul, cât și textul vor deveni translucide. Puteți crește nivelul de transparență schimbând comanda de opacitate de la 0,1 la 1.

HTML 5 CSS 3 IE 9

În designul web, transparența parțială este de asemenea aplicată și realizată prin formatul de culoare RGBA, care este setat numai pentru fundalul unui element.

De obicei, în modele, numai fundalul unui element ar trebui să fie translucid, iar textul ar trebui să fie opac pentru a menține lizibilitatea. Proprietatea opacității este inadecvată aici, deoarece textul din interiorul elementului va fi, de asemenea, parțial transparent. Cel mai bine este să utilizați formatul RGBA, al cărui canal alfa face parte, sau cu alte cuvinte, valoarea transparenței. Valoarea se scrie rgba, apoi valorile componentelor de culoare roșie, albastră și verde sunt listate între paranteze separate prin virgule. Ultima este transparența, care este setată de la 0 la 1, 0 fiind complet transparent și 1 fiind culoarea opacă pentru sintaxa rgba.

Fundal translucid HTML 5 CSS 3 IE 9

Opacitatea fundalului este setată la 90% - fundal semitransparent și text opac.

Descriere

Determină nivelul de transparență al unui element de pagină web. Cu transparență parțială sau completă, imaginea de fundal sau alte elemente de sub obiectul translucid apar prin element.

Sintaxă

opacitate: valoare

Valorile

Valoarea este un număr din interval. O valoare 0 corespunde transparenței totale a elementului și 1, dimpotrivă, opacității sale. Numerele fracționare cum ar fi 0,6 stabilesc transluciditatea. Este permis să scrieți numere fără zero zero, cum ar fi opacitatea: .6.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Rezultatul acestui exemplu este prezentat în Fig. unu.

Smochin. 1. Rezultatul utilizării opacității

Browsere

Firefox până la 3.5 acceptă proprietatea non-standard -moz-opacity.

Internet Explorer până la versiunea 9.0 folosește filtre pentru a schimba transparența, pentru acest browser ar trebui să scrieți filtru: alfa (opacitate \u003d 50), unde parametrul opacității poate lua o valoare de la 0 la 100.

Proprietatea opacitate este utilizată pentru a crea un efect de transparență în CSS.

Browserele IE8 și anterioare acceptă o proprietate alternativă - filtru: alfa (opacitate \u003d x), unde „x” poate lua o valoare de la 0 la 100, cu cât valoarea este mai mică, cu atât elementul va fi mai transparent.

Toate celelalte browsere acceptă proprietatea de opacitate CSS standard, care poate lua ca valoare numere de la 0,0 la 1,0, cu cât valoarea este mai mică, cu atât elementul va fi mai transparent:

Încerca "

Plasați transparența

Pseudo-clasa: hover vă permite să schimbați aspectul elementelor atunci când treceți peste ele. Vom folosi această oportunitate pentru a face ca imaginea să-și piardă transparența la trecerea cu mouse-ul:

Încerca "

Transparență de fundal

Există două modalități posibile de a face un element transparent: proprietatea opacității descrisă mai sus și specificarea culorii de fundal în format RGBA.

Este posibil să fiți deja familiarizați cu modelul de reprezentare a culorilor RGB. RGB (roșu, verde, albastru - roșu, verde, albastru) este un sistem de culoare care determină nuanța prin amestecarea culorilor roșu, verde și albastru. De exemplu, puteți utiliza oricare dintre următoarele declarații pentru a seta culoarea textului la galben:

Culoare: rgb (255.255,0); culoare: rgb (100%, 100%, 0);

Culorile specificate cu RGB vor diferi de valorile hexagonale pe care le-am folosit anterior, prin faptul că permit utilizarea canalului de transparență alfa. Aceasta înseamnă că fundalul unui element cu transparență alfa va arăta ceea ce este dedesubt.

Declarația de culoare RGBA este similară în sintaxă cu regulile RGB standard. Cu toate acestea, printre altele, trebuie să declarăm valoarea ca RGBA (în loc de RGB) și să setăm o valoare zecimală suplimentară pentru transparență după valoarea culorii în intervalul de la 0,0 (complet transparent) la 1 (complet opac).

Culoare: rgba (255,255,0,0,5); culoare: rgba (100%, 100%, 0,0,5);

Diferența dintre proprietatea opacității și RGBA este că proprietatea opacității aplică transparență întregului element, adică întregul conținut al elementului devine transparent. Și RGBA vă permite să setați transparența părților individuale ale unui element (de exemplu, doar textul sau fundalul):

Corp (imagine de fundal: url (img.jpg);) .prim1 (lățime: 400px; margine: 30px 50px; culoare de fundal: #ffffff; chenar: 1px negru solid; greutate font: bold; opacitate: 0,5; filtru : alfa (opacitate \u003d 70); / * pentru IE8 și versiuni anterioare * / text-align: center;) .prim2 (lățime: 400px; margine: 30px 50px; fundal-culoare: rgba (255,255,255,0,5); chenar: 1px solid negru; font-weight: bold; text-align: center;) Încercați "

Notă: valorile RGBA nu sunt acceptate în IE8 și versiunile anterioare. Pentru a declara o culoare de rezervă pentru browserele mai vechi care nu acceptă valorile culorilor cu canale alfa, specificați-o mai întâi înainte de valoarea RGBA: background: rgb (255,255,0); fundal: rgba (255,255,0,0,5);