Az oldalelemek átláthatóságának vezérléséhez a CSS-átfutási tulajdonságot használják. A specifikáció szerint bármely típusú csomópontokra vonatkozik, és minden modern böngészőben támogatott. Ezzel egy érdekes designt hozhat létre, vagy egy kényelmes interaktív interakciót hozhat létre a felhasználóval.

Lehetséges értékek

A CSS-ben lévő opacitási tulajdonság szintaxisa így néz ki:

Választó (opacitás: 0,) választó (opacitás: 0,4;)

A bemeneti elfogadja numerikus értékek a 0-tól 1 A paraméter lehet egy része az egység, míg a pont használják elválasztó egy egész és tört része a CSS.

A nulla átlátszósággal rendelkező elem láthatatlanná válik, de továbbra is továbbra is elfoglalja helyét az oldalon, és megmenti a felhasználóval való kölcsönhatás képességét.

Ha az ingatlan értéke eltér a nullától, az igazi átlátszóság egy bizonyos felső határ százalékában kerül kiszámításra. A szokásos helyzetben az opacitás: 1 meghatározza az elem teljes átlátszatlanságát.

A leányvállalatok átláthatósága

Ha azonban az elem szülővel rendelkezik, amelynek átláthatósága eltér, a számítás változásai. A leszármazott nem lehet "kevésbé átlátható", mint bármelyik őse. A szülő blokk CSS tulajdonságainak értéke a leányvállalat átláthatóságának felső határa lesz.

Szülő (opacitás: 0,7;) Gyermek (Opacity: 1;)

Ilyen helyzetben a gyermekelem 30% -os átlátható lesz, annak ellenére, hogy az opacitás értéke egyenlő.

Példák a használatra

1. példa Átvált. Szükséges, hogy az alapblokk blokk látható legyen a célelem alatt.

Cél (háttér: fekete, opacitás: 0,5;)

Az áttetsző nemcsak a célblokk háttere, hanem a szöveg is.

2. példa Dinamikus átlátszó vezérlés. A CSS Opacity tulajdonságának értéke a célegység megváltozik, amikor a kurzor lebeg.

Cél (Opacity: 0.2;) .target: Hover (Opacity: 1;)

Dinamikus átláthatóság

Az utolsó példa azt mutatja, hogy az átlátszó elemek továbbra is reagálnak az oldal eseményekre, például a kurzor lebegésére. Ez lehetővé teszi, hogy a JavaScript kezelésére CSS átlátszatlanság tulajdonság, valamint alkalmazni átmeneti és animáció mechanizmusok simán módosítsa a megjelenítési módot.

Az átlátszóság eléréséhez a szkriptből egy adott tétel stílusobjektumára kell hivatkoznia.

// az átlátszó var opacity \u003d elem.style.style.Stacity jelenlegi értékének megszerzése; // Állítsa be az új érték elemet.style.opacity \u003d 0,4;

Az egység zökkenőmentes eltűnése az átmeneti CSS tulajdonságokkal valósítható meg:

Elem (Opacity: 0,1, Átmenet: Opacacity 1000ms;) Elem: Hover (Opacity: 0,8; Átmenet: opacitás 2000ms;)

Most az elem csomópontja, amikor az egér lebegése 10-80% -ról egy másodpercig változik, és a kurzor elhagyásakor két másodpercig töltse ki a forrásértéket.

A CSS opacity ingatlan az átmeneti mechanizmussal kombinálva lehetővé teszi, hogy gyönyörű hatásokat hozzon létre.

Az alfa-csatorna az átlátszatlanság helyett

A CSS opactikai mechanizmus fő finomságai:

a cselekvése nemcsak a blokk hátterére vonatkozik, hanem a szöveges tartalmára is, amely előnyös, ha tiszta;
a lányok nem lehetnek kevésbé átlátszóak, mint a szülői.

Ha ezek a hatások megnehezítik a VELOCKER életét, az átlátszatlanság helyett egy egyszerűen átlátszó hátteret kell használniuk az RGBA vagy HSLA formátumban lévő érték meghatározásával.

A CSS3 meghatározza az átláthatósági hatás az oldalelemek átláthatósági hatását. A tulajdonság értéke 0,0 és 1,0 között van. Ha az érték nullával egyenlő, akkor az elem teljesen átlátszóvá válik, és egy értékkel egyenlő értékkel, illetve nem teljesen átlátszó. Az ingatlan alkalmazható bármely oldalelemre.

IMG1 (Opacity: 0,2;) .img2 (Opacity: 0,5;) .img3 (Opacity: 1.0;)

Az átlátszóság telepítése a szkripten keresztül: Object.style.opacity

Régi Mozilla és a Firefox 0.8 használjon nevet ingatlan: -moz-homály, hogy telepíteni keresztül az átláthatóság script: object.style.mozopacity

Safari 1.1, Konqueror 3.1 - A KHTML motorra épített, az átlátszó tulajdonság szabályozásához: -khtml-opacitás az átlátszóság telepítéséhez a szkript segítségével: object.style.khtmlopacity

Az 1.2-es verzióból származó Safari a CSS3 opacitást használja, de ugyanakkor a 3.1-es verziónál régebbi Konqueror, amely megakadályozta a -KHTML-Opacity támogatását, nem lépett be a CSS3 opacitás támogatására.

Az Internet Explorer az 5.5-ös verzióval kezdődően, beleértve az Internet Explorer 7 legfrissebb aktuális verzióját, átláthatóságot hajt végre az Alpha DirectX szűrőn keresztül. Érdemes megjegyezni, hogy ez a szűrő az áttetszőség értékét használja 0 és 100 között (és nem 0,0 és 1,0 között). Azt is megjegyzem, hogy a szűrőt csak a magassággal vagy szélességi tulajdonságokkal ellátott elemre vagy az abszolút értékkel vagy a TB-RL értékével ellátott pozícióval lehet alkalmazni, vagy a TB-RL értékével, vagy az igazban tartandó tartalommal.

Példa (Telepítse az átláthatóságot a felére):

IMG1 (szűrő: progid: dximagetransform.microsoft.alpha (opacitás \u003d 50);) / * szintaxis IE5.5 + (preferált) * / .img2 (szűrő: alfa (opacitás \u003d 50);) / * IE4 * / szintaxis * / Telepítse az átláthatóságot a szkripten keresztül, használjon: object.style.filter \u003d "Progid: dximagetransform.microsoft.alpha (paraméter karakterlánc)"

A W3C hasonló átlátszóságának átláthatóságának megszerzéséhez használja az "Opacity \u003d számot 0-tól 100-ig" értéket, mint paraméter karakterláncot.

Hogyan kell dolgozni minden böngészőben:

Szűrés: Progid: dximagetransform.microsoft.alpha (opacitás \u003d 50); / * IE 5,5 + * / -moz-opacitás: 0,5; / * Mozilla 1.6 és alatt * / -khtml-Opacity: 0,5; / * Konqueror 3.1, Safari 1.1 * / Opacity: 0,5; / * CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 * /

JavaScript.

Funkció SetElemország (SELEMID, NOPACIACIACE) (VAR OpacityProp \u003d GetopacityProperty (); var elem \u003d document.getElementbyid (SELEMID); ha (! Elem ||! OpacityProp) Visszatérés; // Ha nincs elem a megadott azonosítóval vagy böngészővel, Nem támogatja az IF átláthatósági vezérlési módszerek egyik ismert funkcióját (OpacityProp \u003d\u003d "szűrő") // Internet Exproder 5.5+ (NOPACIACIA * \u003d 100, // Ha az átláthatóság már telepítve van, akkor a szűrők gyűjteményén keresztül módosítja azt, Ellenkező esetben adjunk át az átláthatóságot a style-n keresztül. Filter Va Oalpha \u003d Elem.filters ["dximagetransform.microsoft.alpha"] || Elem.filters.alpha; ha (olpha) olfa.opacity \u003d nopacity; egyébként Elem.style.Filter + \u003d "Progid : dximagetransform.microsoft.alpha (Opacity \u003d "+ Nopacity +") "; \u003d\u003d" string ") // CSS3 kompatibilis (Moz 1.7+, Safari 1.2+, Opera 9) Visszatérés" Opacity "; más ha (typeof.shody.style.mozopacity \u003d\u003d "string") // Mozilla 1.6 és fiatalabb, firefox 0.8 visszatér a "Mozopacity"; Egyébként, ha (type of document.body.style.khtmlopacity \u003d\u003d "string") // Konqueror 3.1, Safari 1.1 visszatér a "khtmlopacity"; Más, ha (document.body.appversion && navigator.appversion.Match (/ MSIE ([D] +); /)\u003e \u003d 5.5) // Internet Exploder 5.5+ Visszatérés "Szűrés"; Vissza a hamis; // nincs átláthatóság)

Átlátszó háttér létrehozása HTML és CSS (Opacity és RGBA hatások)

Az áttetsző hatás hatása Az elem jól észrevehető a háttérszámon, és különböző operációs rendszerekben elosztott, mert stílusosnak és gyönyörűnek tűnik. A legfontosabb dolog nem egy kézi rajz áttetsző blokkok alatt, de a kép pontosan ebben az esetben az átláthatóság észrevehetővé válik.

Ez a hatás különböző módon érhető el, beleértve a régimódi módszereket is, mint például a PNG-minta háttérként, létrehozva egy kockás képet és egy opacitás tulajdonságot. De amint a szükséglet felmerül, hogy áttetsző háttér legyen a blokkban, ezek a módszerek kellemetlen oldal.

Tekintsük a szöveg és a háttér áttetszőségét - Hogyan kell használni helyesen a webhelytervezésben:

Ennek a tulajdonságnak a fő jellemzője, hogy az átláthatóság értéke az összes gyermekelemen belül működik, és nem csak a háttérben. Ez azt jelenti, hogy a háttér és a szöveg áttetszővé válik. Átláthatóság növelése esetén az opacitás parancsát 0,1-ről 1-re módosíthatja.

HTML 5 CSS 3 IE 9 átlátszatlanság

Helyszínek létrehozása és előmozdítása az interneten

A webes tervezésben részleges átláthatóságot is használnak, és az RGBA színformátumának köszönhetően, amely csak az elem hátterére van beállítva.

Jellemzően az elem kialakítása áttetszett a tervezésben, és a szöveg átlátszatlan, hogy megőrizze olvashatóságát. Az opacitási tulajdonság nem illeszkedik ide, mert az elemen belüli szöveg részben átlátható lesz. A legjobb az RGBA formátum használata, amely része egy alfa-csatorna vagy más szóval, az átlátszó érték. Az RGBA értékként van írva, majd zárójelben a vesszőn keresztül a piros, kék és zöld színösszetevők értékei szerepelnek. Ez utóbbi átlátszóság, amely 0 és 1 között van, míg a 0 teljes átlátszóságot jelent, és az 1. színű opacitás az RGBA alkalmazás szintaxisa.

Átlátszó háttér HTML 5 CSS 3 IE 9 rgba

Az interneten található webhelyek létrehozása és előmozdítása.

A háttérben lévő opacitás hiánya 90% - áttetsző háttér és átlátszatlan szöveg.

Leírás

Megadja a weboldal elemének átláthatóságának szintjét. Amikor részleges vagy teljes átlátszóság, az áttetsző objektum alatt lévő háttérminta vagy más elemek az elemen keresztül jelennek meg.

Szintaxis

opacity: Érték

Értékek

Az érték a tartományból származik. A 0 érték megfelel az elem teljes átláthatóságának, és az ellenkező esetben - az átlátszatlanságának. A 0,6 formanyomtatvány töredékszáma áttetszőség. Megengedett számokat írni nulla előtt, írja be az opacitást: .6.

HTML5 CSS2.1 CSS3, azaz CR OP SA FX

átlátszatlanság

A példa eredményét az 1. ábrán mutatjuk be. egy.

Ábra. 1. Az átlátszatlanság használatának eredménye

Böngészők

A Firefox a 3.5-ös verzióra támogatja a nem szabványos -moz-opacity tulajdonságot.

Az Internet Explorer A 9.0-es verzióra az átlátszóság megváltoztatásához szűrőket használ, a böngészőre rögzíteni kell a szűrőt: Alpha (Opacity \u003d 50), ahol az opacitás paramétere 0-tól 100-ig tarthat.

A CSS-ben átláthatósági hatás létrehozásához az átlátszatlanság tulajdonságot használnak.

IE8 böngésző és korábbi verziók támogatják az alternatív tulajdonságot - szűrő: alfa (opacitás \u003d x), ahol az "x" értéket 0-tól 100-ig tarthat, annál kisebb az érték, annál átláthatóbb az elem.

Minden más böngésző támogatja a Standard CSS opacity tulajdonságot, amely a szám értéke 0,0 és 1,0 között, annál kisebb az érték, annál átláthatóbb az elem:

A dokumentum neve

Próbáld ki

Átláthatóság a lebegésben

Pseudo-osztály: Hover lehetővé teszi, hogy megváltoztassa az elemek megjelenését, amikor az egérmutatót lebegíti. Ezt a lehetőséget kihasználjuk, hogy a kép az egér lebegésénél elveszíti az átláthatóságát:

A dokumentum neve

Próbáld ki

Átlátszó háttér

Két lehetséges módja van egy tétel átlátható: az átlátszó tulajdonság, és jelzi a háttér színét az RGBA formátumban.

Talán már ismeri a színes ábrázolási modellt RGB formátumban. RGB (piros, zöld, kék - piros, zöld, kék) - színes rendszer, árnyékot határoz meg piros, zöld és kék keverésével. Például, hogy sárga színű szöveget állítson be, az alábbi hirdetések bármelyikét használhatja:

Szín: RGB (255,255,0); Szín: RGB (100%, 100%, 0);

Az RGB által megadott színek eltérnek az általunk használt hexadecimális értékektől, hogy az Alpha átlátszó csatorna használatának lehetővé tétele. Ez azt jelenti, hogy az alfa áttetszőséggel rendelkező elem hátterén keresztül látható, mi található az alatta.

Az RGBA színének bejelentése hasonló a Standard RGB szabályok szintaxisához. Azonban többek között RGBA-nak kell nyilatkozniuk (az RGB helyett), és további decimális átlátszó értéket kell meghatároznunk a 0,0 (teljes átlátszóság) és az 1-ig (teljes átlátszóság) között.

Szín: RGBA (255,255,0,0,5); Szín: RGBA (100%, 100%, 0,0,5);

Az opacitás és az RGBA tulajdonság közötti különbség az, hogy az opacitási tulajdonság átláthatóságot alkalmaz az egész elem teljes elemére, vagyis az elem teljes tartalma átláthatóvá válik. És az RGBA lehetővé teszi az átláthatóság beállítását az elem egyes részeihez (például csak szöveg vagy háttér):

Test (ICPG) .PRIM1 (szélesség: 400px, margó: 30px 50px; háttérszín: #FFFFFF; határ: Border: 1px tömör fekete; betűsúly: félkövér: 5,5; szűrő: alfa (opacitás \u003d 70); / * IE8 és korábbi verziókhoz * / Text-Align: Center;) .Prim2 (szélesség: 400px, margó: 30px 50px; Háttérszín: RGBA (255,255,255,0,5); határ: 1px tömör fekete; Beter: Bold ; Text-Align: Center;) Próbálja meg »

Megjegyzés: Az RGBA értékei nem támogatottak az IE8 böngészőben és a korábbi verziókban. A régi böngészők biztonsági mentési lehetőségeinek kijelölése, amelyek nem támogatják az alfa-csatornák színét, először meg kell adni az RGBA értékének első értékét: Háttér: RGB (255,255,0); Háttér: RGBA (255,255,0,0,5);