Cikk css
Kezdjük az opacitás attribútum leírásával. Ez az attribútum (tulajdonság) szerepel a CSS3 W3C ajánlásában. Az attribútum értéke csak akkor lehet egy szám 0 és 1 közötti Itt - 0 azt jelenti, teljesen átlátszó (láthatatlan) objektumot, és 1 - normál állapotban, átlátszóság nélkül. Egy ingatlan bármilyen objektumra alkalmazható. Példa a felhasználásra:
Ha ezt a tulajdonságot a kísérleti képhez adjuk, akkor a következő hatás érhető el:
Vegye fontolóra az átláthatóság megvalósítását az Internet Explorer korábbi verzióiban (5.5 - 7). Az IE átláthatóságát az Alpha DirectX szűrő határozta meg. Ez a szűrő átlátszósági értékeket alkalmaz 0 és 100 között (és nem 0-ról 1-re). Használata Alpha DirectX sugallja, hogy egy objektum rendelkezik bizonyos jellemzőkkel: fix magassága vagy szélessége, vagy szerelt helyzetben attribútum értéke abszolút, vagy attribútum értékkel writingMode TB-RL, vagy contenteditable állítsa valódi érték.
Példa végrehajtás (ugyanazt a hatást kapjuk, mint az első példában):
Az Opacity nem működik a régebbi verziókban és más böngészőkben, és különleges szkripteket is használnak annak biztosítására. A teljes (lehetőleg lehetséges) keresztböngésző átláthatóságának biztosítása érdekében ilyen hivatkozást használunk (példánk esetén):
homályosság: 0,5;
szűrő: progid: DXImageTransform.Microsoft.Alpha (opacity = 50);
-moz-opacitás: 0,5;
-khtml-opacitás: 0,5;
Mostantól az átláthatóság tökéletesen működik szinte minden, még nem túl releváns böngészőben. Ismétlem, hogy az építés nem érvényes.
Tegyük fel a képünket ilyen átmenet 0,5-ről 1,0-re:
A HTML-ben megírjuk a kódot:
Lehetséges a stílusok leírása és mérete, de lehetséges, és így, mint a példában. Írjuk be a stíluslapot:
homályosság: 0,5;
szűrő: progid: DXImageTransform.Microsoft.Alpha (opacity = 50);
-moz-opacitás: 0,5;
-khtml-opacitás: 0,5;
>
a: lebegés opacitás: 1.0;
szűrő: progid: DXImageTransform.Microsoft.Alpha (opacity = 100);
-moz-opacitás: 1,0;
-khtml-opacitás: 1,0;
>
átlátszatlanság: 0,5;
szűrő: progid: DXImageTransform.Microsoft.Alpha (opacity = 50);
-moz-opacitás: 0,5;
-khtml-opacitás: 0,5;
>
3. Átlátszó ablakok. Gyakran előforduló információ megjelenésekor egy előugró ablakban félig átlátszó. Ebben az esetben az ablak olyan blokk, amely más tartalom felett kell lennie (ne felejtsd el a z-indexet). például:
A HTML-ben ezt írja be (egy ablakhoz):
A stíluslapban ezt írjuk (például):
homályosság: 0,5;
szűrő: progid: DXImageTransform.Microsoft.Alpha (opacity = 50);
-moz-opacitás: 0,5;
-khtml-opacitás: 0,5;
>
4. Az átláthatóság egyik legfejlettebb alkalmazása. A tárgy lágy átmenete áttetsző állapotból normál állapotba. Itt - számos megvalósítási mód közül választhat: akár egy speciális opacitás-könyvtár, akár egy szabványos jQuery segítségével. Tekintettel arra, hogy olyan webhelyen, ahol ezt a hatást igényli, rendszerint a jQuery már kapcsolódik, ezért használni fogjuk. Csatlakoztassuk a könyvtárat, és írjuk be a következő szkriptet a HTML-ben:
var opacity = 0.5 - kezdeti átláthatóság
toOpacity = 1,0 - végleges áttetszőség
időtartama = 400 - átmeneti idő
Itt leírjuk a képünk kódját:
Ha nincs szükség további stílusokra, akkor nem írhat CSS-t. A hatás a "Demo" -ban látható.
Ez mind a mai nap. Köszönjük figyelmét!