CSS tulajdonság 3 átlátszatlanság lehetővé teszi a webhely bizonyos elemeinek átláthatóvá tételét.

Az elem átlátszóságának mértékét a from érték határozza meg 0 előtt 1 Ahol 0 - teljesen átlátszó 1 - egyáltalán nem átlátszó .. Például az érték 0.5 tulajdonságait átlátszatlanság a képre alkalmazva azt jelenti, hogy a képnek áttetszőnek kell lennie.

Átláthatóság az IE-ben

Böngésző internet böngésző nem támogatja a tulajdonságokat átlátszatlanság a kilencedik verzióig viszont saját szűrővel rendelkezik, amellyel beállíthatja az átlátszóság mértékét:

szűrő: alfa(átlátszatlanság=50)

Jelentése átlátszatlanság szűrőhöz internet böngésző Az Explorer eltérhet a 0 - teljesen átlátszó 100 - áttetsző

Ennek a menünek a blokkjai IE-ben is áttetszőek lesznek lebegve!

itthon
Oldaltérkép
Vegyél egy elefántot
elefántot eladni
Béreljen elefántot

Előtagok.

Erről elvileg be lehetne fejezni az átláthatóságról szóló fejezetet, de szeretnék még mesélni az ún. szállítói előtagok.. ezeknek az elvtársaknak nem sok közük van ehhez a fejezethez, azonban a CSS3 tanulása során egyre gyakrabban találkoznak majd és valahol beszélnem kell róluk - szóval itt elmondom.

Tehát a szállítói előtagok a CSS-tulajdonságok speciális előtagjai, amelyeket a böngészők olyan kísérleti tulajdonságokhoz használnak, amelyek hivatalosan nem részei a CSS-specifikációnak.

Emlékezzünk rá, hogy a CSS 3 specifikáció még fejlesztés alatt áll, és formálisan az ebben az oktatóanyagban leírt tulajdonságok nem léteznek a természetben, de a böngészők már aktívan használják őket saját veszélyükre és kockázatukra.

Miért csak saját felelősségre? Igen, mert előfordulhat, hogy a CSS 3 specifikáció hivatalos jóváhagyásakor az abban leírt tulajdonságok működésükben eltérnek a böngészők által már használt azonos nevű tulajdonságoktól. Nos, vessünk egy pillantást a CSS 3 specifikáció fejlesztőire egy ingatlan kijelöléséhez átlátszatlanság nem a blokk átlátszóságának mértékeként, hanem pl az árnyékolásaként vagy villogásaként (persze hülyeségeket írok), amit akkor már milliók fognak megjeleníteni telepített böngészők amelyekre átlátszatlanság ez az átláthatóság?

Vagy mondjuk a böngészőfejlesztők előrukkoltak a saját tulajdonságukkal – ez az újítás, amivel egyáltalán nincs sehol senki, de egy ilyen tulajdonságú dokumentum nem megy át az érvényességi ellenőrzésen, mert a specifikációban nincs ilyen tulajdonság.

Ezen és egyéb okok miatt a böngészők előtagokat használnak olyan tulajdonságok elején, amelyek nem részei a hivatalos specifikációnak. Minden böngészőnek saját előtagja van, amely „-” jellel kezdődik, ez a jel a tulajdonság elején, valamint ez a „_” jel a CSS 2.1 specifikációja szerint azt jelzi, hogy a tulajdonság bizonyos CSS-kiterjesztésekhez van fenntartva. böngészők.

Íme a legnépszerűbb böngészők és előtagjaik:

Böngésző	Előtag
Opera	-o-
Firefox, SeaMonkey, Camino	-moz-
Internet Explorer 8 és újabb	-Kisasszony-
Safari 3-as verzióig, Konqueror	-khtml-
Safari 3 és újabb, Google Chrome	-webkit-

Az előtagok használata nagyon egyszerű, csak vegyünk néhány CSS tulajdonságot, és helyettesítsük be a kívánt előtagot, például a tulajdonságot átlátszatlanság helyettes -moz- kiderül: -moz-átlátszatlanság

Bár valójában az én kifejezésem " használjon előtagokat» rossz! igazából sehol semmi nincs helyettesítve, csak tulajdonság van átlátszatlanság, van -moz-átlátszatlanságés ez két különböző tulajdonság, aminek nem kell ugyanazt a funkciót ellátnia!! - meg kell érteni.

És azt is meg kell érteni, hogy bizonyos konkrét böngészők bizonyos verziókig csak a saját előtagjaikkal támogathatják a CSS-tulajdonságokat (megint rosszul fejezem ki magam, helyes azt mondani, hogy a saját tulajdonságaim a böngésző CSS kiterjesztései), ill. kezdetben akár kidolgozott specifikációkra is támaszkodhat. – Ebben a tankönyvben minden konkrét esettel külön foglalkozunk.

Ami az átláthatóságról szóló fejezetet illeti, meg kell jegyezni, hogy Firefox böngésző 3.5 és korábban saját tulajdonukat használják -moz-átlátszatlanság, és az 1.1-es verzió előtti Safari böngésző használja a tulajdonságát -khtml-opacity .

Tehát annak érdekében, hogy a példánkat teljesen keresztezőssé tegyük, hozzá kell adnunk néhány további sort a kódhoz:

Amint látható, az előtagok jelentősen megnyújtják a kódot, és használatuk nem mindig indokolt, ha a böngészők azon verziói, amelyek bizonyos tulajdonságokkal csak saját előtagjuk használatával akarnak dolgozni, meglehetősen régiek, mint a tulajdonság esetében. átlátszatlanság, akkor nem lehet őket jelezni .. - bár ez persze rossz tanács ..

Most pedig néhány hasznos tipp..

Mindig használjunk előtagokat (jó, ha persze egyik vagy másik böngésző nem nélkülözheti) olyan esetekben, amikor a használt tulajdonság nagyban befolyásolhatja az oldal teljesítményét, olvashatóságát és használhatóságát. Az egy dolog, ha néhány apróság nem működik az oldal kialakításában, és az egészen más, ha például nem működik az oldal menüje, vagy nem lehet elolvasni az oldalon lévő szöveget a böngésző által. nem támogat valamilyen tulajdonságot, hanem egy hasonlót használ.

A CSS-ben háromféleképpen módosíthatja egy elem átlátszóságát:
az átlátszatlanság tulajdonság használatával,
az rgba() függvény használatával,
a hsla() függvény használatával.

1. Az átlátszatlanság tulajdonság

Az átlátszatlanság tulajdonság lehetővé teszi, hogy a weboldal bármely elemét részben vagy teljesen átlátszóvá tegye. Ez a tulajdonság megváltoztatja a beállított elemek átlátszóságát háttérkép(kép), vagy állítsa be a hátteret színnel vagy színátmenettel. Ha az alkalmazott átlátszatlansági tulajdonsággal rendelkező elemben más elemek is vannak, akkor ezek is módosítják az átlátszatlanságukat.
Az opacitás tulajdonság 0 (teljesen átlátszó) és 1 (átlátszatlan) közötti értékeket vesz fel, például:

H1 (szín: #CD6829;) div ( háttér: #CDD6DB; átlátszatlanság: .3; )
Rizs. 1. Az elemek átlátszósága az átlátszatlanság használatával

2. RGB() függvény

Az RGBA színmodell színárnyalatot hoz létre a szükséges arányok keverésével. piros, zöldÉs kék virágok, és alfa csatorna (alfa) felelős a szín átlátszóságának mértékéért. Az opacitás tulajdonságtól eltérően egy más elemeket tartalmazó doboz esetén az rgba() függvény csak a doboz átlátszatlanságát módosítja.

Rizs. 2. RGB színmodell h1 (szín: #CD6829;) div (háttér: rgba(205, 214, 219, 0,3);)
Rizs. 3. Elemek átlátszósága az rgba() függvény segítségével

3. hsl() függvény

A hsla() függvény, amelynek paraméterei jelentése tónus (színárnyalat), Telítettség, FényerősségÉs alfa csatorna (alfa), áttetsző szín beállítását is lehetővé teszi.

A színárnyalatok százalékban vannak megadva a színkör megfelelő értékével. Maga a kör szektorokra van osztva, amelyek határán elsődleges színek találhatók:

0/360° - piros
60° - sárga
120° - zöld
180° - kék
240° - kék
270° - lila
300°-os bíbor.

A fekete szín eléréséhez a színárnyalat, a telítettség és a fényerő értékeit nullára kell állítani - hsla(0, 0%, 0%, 1) . A fehéret 100%-os fényerővel kapjuk hsla(0, 0%, 100%, 1) , a szürke pedig nulla érték telítettség hsla(0, 0%, 50%, 1) .

A CSS3 meghatározza az átlátszatlanság tulajdonságot, hogy átlátszó effektust alkalmazzon az oldalelemekre. Jelentése adott ingatlan egy 0,0 és 1,0 közötti szám. A nulla érték teljesen átlátszóvá teszi az elemet, míg az egyes érték teljesen átlátszatlanná teszi. A tulajdonság bármely oldalelemre alkalmazható.

Img1 ( átlátszatlanság: 0,2; ) .img2 ( átlátszatlanság: 0,5; ) .img3 ( átlátszatlanság: 1,0; )

Az átlátszóság szkripten keresztüli beállításához használja: object.style.opacity

A régi Mozilla és a Firefox 0.8 saját nevét használja ehhez a tulajdonsághoz: -moz-opacity Az átlátszóság szkripten keresztüli beállításához használja: object.style.MozOpacity

Safari 1.1, Konqueror 3.1 – a KHTML motorra épülve, használja a tulajdonságot az átlátszóság szabályozására: -khtml-opacity Az átlátszóság szkripten keresztüli beállításához használja: object.style.KhtmlOpacity

A Safari az 1.2-es verzió óta használja a CSS3 átlátszatlanságot, de a 3.1-es verziónál régebbi Konqueror, miután már nem támogatja a -khtml-opacityt, nem vezette be a CSS3 átlátszatlanság támogatását.

Internet Explorer az 5.5-ös verziótól a mai legfrissebb verzióig Internetes verzió Az Explorer 7 az Alpha DirectX szűrőn keresztül valósítja meg az átláthatóságot. Érdemes megjegyezni, hogy ez a szűrő 0 és 100 közötti átlátszósági értéket használ (és nem 0,0 és 1,0 között). Azt is megjegyzem, hogy a szűrőt csak olyan elemre lehet alkalmazni, amelynek tulajdonsága magasság, szélesség vagy pozíció abszolút értékre van állítva, vagy a writeMode értéke tb-rl, vagy a contentEditable értéke igaz.

Példa (az átlátszatlanságot félre állítva):

Img1 ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); )/* IE5.5+ szintaxis (előnyös) */ .img2 ( szűrő: alpha(opacity=50); ) /* IE4 szintaxis */ Címzett állítsa be az átláthatóságot szkripten keresztül, használja: object.style.filter = "progid:DXImageTransform.Microsoft.Alpha(paraméterkarakterlánc)"

A W3C átlátszósághoz hasonló átlátszóság eléréséhez használja az "opacity=szám 0-tól 100-ig" paramétert.

Hogyan lehet minden böngészőben működni:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/ -moz-opacitás: 0,5; /* Mozilla 1.6 és régebbi */ -khtml-opacitás: 0,5; /* Konqueror 3.1, Safari 1.1 */ átlátszatlanság: 0,5; /* CSS3 – Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */

javascript

függvény setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Ha nincs megadott azonosítójú elem vagy a böngésző nem támogatja az átlátszóság szabályozására szolgáló függvény által ismert egyik módszert sem if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // Ha az átlátszóság már be van állítva, akkor módosítsa a szűrőkkel gyűjtemény, ellenkező esetben adjon hozzá átláthatóságot a style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // Hogy ne írjon felül más szűrőket, használja a "+=" ) else // Egyéb böngészők elem.style = nOpacity; ) függvény getOpacityProperty() ( if (typeof document.body.style.opacity == "karakterlánc") // CSS3-kompatibilis (Moz 1.7+, Safari 1.2+, Opera 9) az "opacity" értéket adja vissza; else if (typeof document.body.style.MozOpacity = = "string") // Mozilla 1.6 és régebbi verziók , a Firefox 0.8 visszaadja a "MozOpacity"-t; else if (typeof document.body.style.KhtmlOpacity == "string") // A Konqueror 3.1, Safari 1.1 "KhtmlOpacity"-t ad vissza; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ "szűrő"; return false; // nincs átlátszóság )

Feladat

Tegyen áttetszővé egy blokkelemet, amelynek teljes tartalma.

Megoldás

Egy elem átlátszósági fokának megváltoztatásához a stílustulajdonság átlátszatlanságát 0 és 1 közötti értékkel használjuk, ahol a 0 a teljes átlátszóságot jelenti, az 1 pedig éppen ellenkezőleg, az objektum átlátszatlanságát. Az Internet Explorerben ez a tulajdonság nem működik, ezért speciális szűrőt kell használnia, amely tulajdonság nem része a CSS specifikációnak. Az 1. példa bemutatja, hogyan lehet beállítani egy réteg átlátszóságát minden böngészőben.

1. példa Félig átlátszó réteg

HTML5 CSS 2.1 IE Cr Op Sa Fx

Eredmény ezt a példátábrán látható. 1.

Rizs. 1. Félig átlátszó réteg a Safari böngészőben

A szűrő tulajdonság csak azokhoz az elemekhez ad átlátszóságot, ahol legalább az egyik méret (szélesség vagy magasság) be van állítva, vagy az elem értéke abszolút pozicionálás(pozíció : abszolút ).

Vegye figyelembe azt is, hogy az átlátszóság a réteg minden tartalmára hatással van, beleértve a gyermekelemeket is, és nem tudja növelni az átlátszatlanság szintjét az átlátszóság változtatásával. Az 1. példában, ahol a réteg átlátszósága 0,7, a rétegen belüli szöveg ugyanazt az értéket kapja. Megengedhető, hogy kisebb legyen, de a szöveg nem haladhatja meg a 0,7-es átlátszósági értéket.

A CSS opacitás tulajdonsága felelős az elemek (képek, szövegek, blokkok) átláthatóságáért a html-ben.

CSS szintaxis

Ahol az érték valós értékeket vehet fel a 0,0 és 1,0 közötti tartományban. Az 1,0 érték azt jelenti, hogy nincs átlátszóság (alapértelmezett).

1. példa. átlátszó kép html-ben

Az első kép átlátszóság nélkül, a második 0,5-ös átlátszósággal jelenik meg.

Elemek áttetszősége

Lebegve tegye áttetszővé a képet!

Demo Források letöltése

Köszönöm a figyelmet!

Következő cikk
Hogyan készítsünk görgethető divet?