Să începem cu descrierea atributului opacity. Acest atribut (proprietate) este inclus în recomandarea W3C din CSS3. Valorile atributului pot fi numere de la 0 la 1. Aici - 0 înseamnă transparența totală (invizibilitatea) obiectului și 1 - starea standard, fără transparență. O proprietate poate fi aplicată oricărui obiect. Exemplu de utilizare:
Dacă atribuim această proprietate imaginii noastre experimentale, obținem următorul efect:
Luați în considerare opțiunea de a implementa transparența în versiunile mai vechi ale Internet Explorer (5.5 - 7). Transparența în IE a fost specificată prin filtrul Alpha DirectX. Acest filtru are valori de transparență cuprinse între 0 și 100 (și nu între 0 și 1). Utilizarea Alpha DirectX sugerează dacă un obiect are anumite atribute: înălțime fixă sau lățime sau poziție montată atribuie valoarea absolută, sau se poate atribui o valoare writingMode tb-rl, sau contenteditable set valoare reală.
Exemplu de implementare (obținem același efect ca în primul exemplu):
Opacitatea nu funcționează în versiuni mai vechi și în alte browsere, iar scripturile speciale sunt, de asemenea, folosite pentru a le asigura. Pentru a asigura transparența încrucișată completă (pe cât posibil), se utilizează o astfel de legătură (pentru exemplul nostru):
opacitate: 0,5;
filtru: progid: DXImageTransform.Microsoft.Alfa (opacitate = 50);
-moz-opacitate: 0,5;
-khtml-opacitate: 0,5;
Transparența va funcționa perfect în aproape toate browserele, chiar nu foarte relevante. Repet că construcția nu este validă.
Să facem pentru imaginea noastră o astfel de tranziție de la 0.5 la 1.0:
În HTML, vom scrie codul:
A fost posibilă scrierea și dimensiunile în stiluri, dar este posibil și așa, ca în exemplu. Să scriem în foaia de stil:
o opacitate: 0,5;
filtru: progid: DXImageTransform.Microsoft.Alfa (opacitate = 50);
-moz-opacitate: 0,5;
-khtml-opacitate: 0,5;
>
a: opacitatea hover: 1.0;
filtru: progid: DXImageTransform.Microsoft.Alpha (opacitate = 100);
-moz-opacitate: 1,0;
-khtml-opacitate: 1,0;
>
opacitate opacitate: 0,5;
filtru: progid: DXImageTransform.Microsoft.Alfa (opacitate = 50);
-moz-opacitate: 0,5;
-khtml-opacitate: 0,5;
>
3. ferestre translucide. Adesea, atunci când se afișează informații într-o fereastră pop-up, este făcută semi-transparentă. În acest caz, fereastra este un bloc care trebuie să fie mai presus de alt conținut (nu uitați de z-index). exemplu:
În HTML, scrieți acest lucru (pentru o fereastră):
În foaia de stil scriem acest lucru (de exemplu):
opacitate: 0,5;
filtru: progid: DXImageTransform.Microsoft.Alfa (opacitate = 50);
-moz-opacitate: 0,5;
-khtml-opacitate: 0,5;
>
4. Una dintre cele mai avansate aplicații de transparență. Tranziție ușoară a obiectului de la o stare translucidă la o stare normală. Aici există câteva modalități de implementare: fie printr-o bibliotecă specială de opacitate, fie prin jQuery standard. Considerând că pe un site unde acest efect este necesar, de regulă jQuery este deja conectat, îl vom folosi. Să conectăm biblioteca și să scriem următorul script în HTML:
var opacitate = 0,5 - transparență inițială
toOpacity = 1.0 - transparență finală
durata = 400 - timpul de tranziție
Acolo vom scrie codul imaginii noastre:
Dacă nu aveți nevoie de stiluri suplimentare, nu puteți scrie CSS. Puteți vedea efectul în "Demo".
Asta e tot pentru ziua de azi. Vă mulțumesc pentru atenție!
Articole similare
-
Emaila de email smalină - enciclopedie mare de petrol și gaze, articol, pagina 1
-
Din articolul "Ce este Oblomovismul", dezvoltarea de lecții, prezentări, planificare, note de curs
Trimiteți-le prietenilor: