| 3. példa BODY ( háttér: url(http://www.uarating.com/news/wp-content/uploads/2016/05/flowers-04-may-2016.jpg) no-repeat; background-size:100% ; ) .block( background-color: rgba(255, 228, 196, 0.88); padding: 25px; text-align:center; ) Áruházunkban mindenféle színt megtalálsz.
Vegye figyelembe, hogy a blokk szövegtartalma teljesen látható (100% fekete), míg a háttér 0,88-as alfa csatornára van állítva, azaz. 88%.
Ez a bejegyzés a végéhez ért. Iratkozz fel a blogomra, és ne felejtsd el meghívni az ismerőseidet. Sok sikert a webes nyelvek tanulásához! Viszlát!
/* 06.07.2006 */
CSS átlátszóság (css átlátszatlanság, javascript átlátszatlanság) Az átlátszóság hatása ennek a cikknek a témája. Ha szeretné megtanulni, hogyan lehet html oldalelemeket átláthatóvá tenni CSS vagy Javascript segítségével, és hogyan lehet elérni a keresztböngészést (ugyanaz a munka különböző böngészőkben), figyelembe véve a Firefox, Internet Explorer, Opera, Safari, Konqueror böngészőket, akkor szívesen látjuk. Ezenkívül fontoljon meg egy kész megoldást az átláthatóság fokozatos megváltoztatására javascript használatával. CSS átlátszóság (CSS átlátszóság) CSS átlátszatlanság szimbiózis Szimbiózis alatt azt értem, hogy a különböző böngészőkhöz tartozó különböző stílusokat egy CSS-szabályban kombinálják a kívánt hatás elérése érdekében, pl. böngészők közötti megvalósításhoz. Szűrő: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 */ /* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */ Valójában az első és az utolsó szabályra van szükség, az IE5.5+ és a CSS3 átlátszatlanságát megértő böngészők esetében, és a középen lévő két szabály nyilván nem tesz különbséget, de nem is zavar (döntse el maga, hogy szükséged van rájuk). Javascript átlátszatlanság szimbiózis Most próbáljuk meg beállítani az átláthatóságot a szkripten keresztül, figyelembe véve a különböző böngészők fent leírt jellemzőit. A setElementOpacity(sElemId, nOpacity) függvény ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) visszatér; // 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 == "string") // CSS3-kompatibilis (Moz 1.7+, Safari 1.2+, Opera 9) visszatér az "opacity"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 és korábbi, Firefox 0.8 "MozOpacity"; 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 ) A függvény két argumentumot használ: sElemId – elemazonosító, nOpacity – 0,0 és 1,0 közötti valós szám, amely a CSS3 átlátszatlansági stílusában határozza meg az átlátszóságot.
Szerintem érdemes elmagyarázni a setElementOpacity függvénykód IE részét. VaroAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; Felmerülhet a kérdés, hogy miért nem állítjuk be az átlátszóságot az elem.style.filter = "..." tulajdonsághoz (=) hozzárendelve; ? Miért használja a "+="-t a szűrő tulajdonság hozzáadásához a karakterlánc végéhez? A válasz egyszerű, nehogy "felülírjon" más szűrőket. Ugyanakkor, ha másodszor ad hozzá egy szűrőt, akkor az nem módosítja a szűrő korábban beállított értékeit, hanem egyszerűen hozzáadódik a tulajdonságsor végéhez, ami nem helyes. Ezért, ha a szűrő már be van állítva, akkor azt az elemre alkalmazott szűrők gyűjteményén keresztül kell manipulálni: elem.filters (de vegye figyelembe, hogy ha a szűrő még nincs hozzárendelve az elemhez, akkor nem lehet kezelni ezen a gyűjteményen keresztül). A gyűjteményelemek szűrőnév vagy index alapján érhetők el. A szűrő azonban két stílusban is megadható, a rövid IE4 stílusban vagy az IE5.5+ stílusban, amit a kód figyelembe vesz. Egy elem átlátszóságát simán módosíthatja Kész megoldás. Az opacity.js könyvtár használata img ( filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) // Hozzon létre egy szabályt az átlátszóság megváltoztatásához: állítsa be a szabály nevét, az átlátszóság kezdetét és végét , és egy opcionális paraméter késleltetés, amely befolyásolja az átlátszóság megváltoztatásának sebességét fadeOpacity.addRule("oR1", .3, 1, 30);  fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(this.id, "oR1") " onmouseout="fadeOpacity.back(this.id) " src="/img/sweet_cherry.jpg" width="98" height="97" /> Alap lépések: Összekapcsoljuk a függvénytárat;
Határozza meg a szabályokat a fadeOpacity.addRule() metódussal;
Meghívjuk a fadeOpacity() metódust, hogy az átlátszóságot a kezdeti értékről a végső értékre módosítsuk, vagy a fadeOpacity.back() metódust, hogy visszatérjünk az átlátszósági szint kezdeti értékéhez. Rágás A könyvtár csatlakoztatásának módja szerintem a fenti példából látható. Most érdemes elmagyarázni a szabályok meghatározását. Az átláthatóság zökkenőmentes megváltoztatására szolgáló metódusok meghívása előtt meg kell határoznia a folyamat végrehajtásának szabályait: meg kell határoznia a kezdeti és a végső átlátszóságot, és ha szükséges, meg kell adnia egy késleltetési paramétert, amely befolyásolja a változtatási folyamat sebességét. átláthatóság.
A szabályok meghatározása a fadeOpacity.addRule metódussal történik
Szintaxis: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)
Érvek:
- sRuleName - szabály neve, tetszőlegesen beállítva;
- nStartOpacity és nFinishOpacity - kezdeti és végi átlátszóság, számok 0,0 és 1,0 tartományban;
- nDelay – késleltetés ezredmásodpercben (opcionális argumentum, alapértelmezett érték 30).
Magát az átlátszóságot fadingnak hívjuk a fadeOpacity(sElemId, sRuleName) metódusokkal, ahol a sElemId az elemazonosító, az sRuleName pedig a szabály neve. Az átlátszóság eredeti állapotának visszaállításához használja a fadeOpacity.back(sElemId) metódust. :hover az egyszerű átlátszóság megváltoztatásához Azt is megjegyzem, hogy az átlátszóság egyszerű megváltoztatásához (de nem fokozatos változáshoz) pont megfelelő a :hover pszeudo-választó, amely lehetővé teszi, hogy stílusokat definiáljunk egy elemhez abban a pillanatban, amikor az egérrel rámutatunk. a:hover img ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) 
Kérjük, vegye figyelembe, hogy a kép az A elemen belül van elhelyezve. A tény az, hogy az Internet Explorer 6-os verzióig a :hover pszeudo-választót csak a hivatkozásokra vonatkozóan értelmezi, és nem az elemekhez, ahogyan a CSS-ben kellene. (IE7-ben a helyzetet javították) . Átlátszóság és szaggatott szöveg az IE-ben A Windows XP megjelenésével megjelent a képernyő-betűtípusok ClearType élsimítása, és ezzel együtt az IE-ben ennek az élsimítási módszernek a használatakor jelentkező mellékhatások. A mi esetünkben, ha a ClearType élsimítási módszerrel rendelkező szöveges elemre transzparenciát alkalmazunk, akkor a szöveg már nem jelenik meg normálisan (félkövér szöveg - félkövér , pl. duplázódik, különféle műtermékek is megjelenhetnek pl. kötőjelek, szaggatott szöveg formájában). A helyzet javítása érdekében az IE esetében be kell állítani a háttérszínt, a CSS tulajdonságot background-color , azt az elemet, amelyre az átlátszóságot alkalmazni kell. Szerencsére az IE7 kijavította a hibát.
Ebben a leckében az ilyen CSS-tulajdonságokat elemezzük - az átlátszatlanságot és az RGBA-t. Az Opacity tulajdonság csak az elemek átlátszóságáért, az RGBA funkció pedig a színért és az átlátszóságért felelős, ha megadod az alfa csatorna transzparencia értékét. CSS átlátszatlanság Az átlátszatlanság számértéke 0,0 és 1,0 közötti tartományban van megadva, ahol a nulla a teljes átlátszóságot, az egy pedig az abszolút átlátszóságot jelenti. Ha például 50%-os átlátszóságot szeretne látni, az értéket 0,5-re kell állítania. Ne feledje, hogy az átlátszatlanság a szülő összes gyermekelemére vonatkozik. Ez pedig azt jelenti, hogy az áttetsző háttéren lévő szöveg is áttetsző lesz. Ez pedig már nagyon jelentős hátrány, a szöveg nem tűnik ki olyan jól.
Átláthatóság a CSS Opacity segítségével
A képernyőképen jól látható, hogy a fekete szöveg ugyanolyan áttetszővé vált, mint a kék háttér. Div (
háttér: url(images/yourimage.jpg); /* Háttérkép */
szélesség: 750 képpont
magasság: 100 képpont;
margó: auto;
}
.kék(
háttér: #027av4; /* Átlátszó háttérszín */
átlátszatlanság: 0,3 /* Háttér áttetszőség értéke */
magasság: 70 képpont;
}
h1 (
kitöltés: 6px
font-család: Arial Black;
font-weight: bolder;
betűméret: 50 képpont;
} CSS átlátszóság RGBA formátumban Az RGBA színformátum az átlátszatlanság tulajdonság modernebb alternatívája. R (piros), G (zöld), B (kék) - jelentése: piros, zöld, kék. Az utolsó A betű az alfa csatornát jelenti, amely beállítja az átlátszóságot. Az RGBA az Opacity-vel ellentétben nem befolyásolja a gyermekelemeket.
Most nézzük meg a példánkat az RGBA használatával. Cseréljük ki ezeket a sorokat a stílusokban. Háttér: ##027av4; /* Háttérszín */
átlátszatlanság: 0,3 /* háttér áttetszőség értéke */
a következő sorra Háttér: rgba(2, 127, 212, 0,3); Amint láthatja, a 0,3-as transzparenciaérték mindkét módszernél azonos. Az RGBA példa eredménye: A második képernyőkép sokkal jobban néz ki, mint az első.
A blokkok hátterének áttetszőségével játszva érdekes hatásokat érhet el az oldalon. Fontos, hogy ezek az áttetsző blokkok egy színes minta, például fénykép tetejére kerüljenek. Csak ebben az esetben lesz észrevehető a hatás. Ezt a technikát régóta használják a tervezésben, még a CSS3 megjelenése előtt is pusztán grafikus programokban valósították meg.
Ha az ügyfél megköveteli, hogy az elrendezés jól nézzen ki az Internet Explorer böngésző régebbi verzióiban, akkor adja hozzá a szűrő tulajdonságot, és ne felejtse el megjegyzést fűzni ahhoz, hogy a kód érvényessége ne szenvedjen csorbát.
.kék(
háttér: rgba(0, 120, 201, 0,3);
szűrő: alpha(Opacity=30); /* Átláthatóság az IE-ben */
}
Következtetés Az RGBA formátumot az Internet Explorer kivételével minden modern böngésző támogatja. Az is nagyon fontos, hogy az RGBA rugalmas legyen, csak egy adott elemet érint, annak gyermekeit nem érinti. Egyértelmű, hogy a kódoló számára kényelmesebb. Határozottan az RGBA formátum mellett döntöttem a CSS átláthatóságának eléréséhez.
Az anyag jobb konszolidációja és a nagyobb áttekinthetőség érdekében azt javaslom, hogy menjen végig. Átlátszó háttér létrehozása HTML-ben és CSS-ben (átlátszatlanság és RGBA effektusok) Az elem áttetsző hatása jól látható a háttérképen, és széles körben elterjedt a különböző operációs rendszerekben, mert stílusos és gyönyörű megjelenésű. A lényeg, hogy ne monokromatikus minta legyen az áttetsző blokkok alatt, hanem egy kép, ebben az esetben az átlátszóság észrevehetővé válik.
Ez a hatás többféle módon érhető el, beleértve a régimódi technikákat, mint például a PNG-kép háttérként való használata, kockás kép létrehozása és az átlátszatlanság tulajdonság használata. De amint szükségessé válik egy áttetsző háttér létrehozása a blokkban, ezeknek a módszereknek kellemetlen hátrányai vannak.
Vegye figyelembe a szöveg és a háttér áttetszőségét – hogyan kell helyesen használni a weboldal tervezésében:
Ennek a tulajdonságnak az a fő jellemzője, hogy az átlátszóság értéke az összes gyermekelemre hatással van, nem csak a háttérre. Ez azt jelenti, hogy a háttér és a szöveg is áttetszővé válik. Növelheti az átlátszósági szintet, ha az opacitás parancsot 0,1-ről 1-re módosítja. HTML 5 CSS 3 IE 9 átlátszatlanság törzse ( háttér: url(images/cat.jpg); ) div ( átlátszatlanság: 0,6; háttér: #fc0; /* Háttérszín */ kitöltés: 5px; /* Kitöltés a szöveg körül */ ) Webhelyek létrehozása és népszerűsítése az interneten A webdesignban a részleges átlátszóságot is alkalmazzák, és az RGBA színformátum révén érik el, amely csak az elem hátterére van beállítva.
Egy tervben jellemzően csak az elem háttere legyen áttetsző, a szöveg pedig átlátszatlan, hogy olvasható maradjon. Az átlátszatlanság tulajdonság nem illik ide, mert az elemen belüli szöveg is részben átlátszó lesz. A legjobb az RGBA formátumot használni, amelynek az alfa csatorna, vagy más szóval az átlátszósági érték is része. Az értéket rgba-val írjuk, majd a szín piros, kék és zöld összetevőinek értékei zárójelben, vesszővel elválasztva jelennek meg. Utolsó következik az átlátszóság, amely 0 és 1 között van beállítva, ahol a 0 a teljesen átlátszó, az 1 pedig az átlátszatlan, az rgba alkalmazásának szintaxisa. Félig átlátszó háttér HTML 5 CSS 3 IE 9 rgba törzs ( háttér: url(images/cat.jpg); ) div ( háttér: rgba(0, 170, 238, 0.4); /* Háttérszín */ szín: #fff ; / * Szöveg színe */ kitöltés: 5px; /* Margók a szöveg körül */ ) Webhelyek létrehozása és népszerűsítése az interneten. A háttér átlátszatlansági értéke 90% - áttetsző háttér és átlátszatlan szöveg.
CSS átláthatóság - böngészők közötti megoldás - 3,8 az 5-ből 6 szavazat alapján
Ebben az oktatóanyagban megvizsgáljuk a CSS átlátszóságát, megtanuljuk, hogyan lehet az oldal különböző elemeit átlátszóvá tenni, és hogyan érhetjük el a teljes kereszt-böngészőt, azaz ennek a hatásnak ugyanazt a hatását a különböző böngészőkben. Hogyan állítsuk be bármely elem átlátszóságát A CSS3-ban az opacitás tulajdonság felelős az átlátszó elemek létrehozásáért, amelyek bármely elemre alkalmazhatók. Ennek a tulajdonságnak 0 és 1 közötti értékei vannak, amelyek meghatározzák az átlátszóság mértékét. Ahol a 0 teljesen átlátszó (az összes elem alapértelmezett értéke), az 1 pedig teljesen átlátszatlan. Az értékek törtként vannak felírva: 0,1, 0,2, 0,3 stb.
Használati példa:
Átlátszóság .im ( szűrő: alpha(Opacity=50); -moz-opacity: 0,5; -khtml-opacity: 0,5; opacity: 0,5; )
A böngészők közötti átláthatóság Nem minden böngésző érzékeli és valósítja meg egyformán a fenti átlátszatlansági tulajdonságot. Bizonyos esetekben más tulajdonságnevet vagy szűrőket kell használni.
A CSS3 átlátszatlanság tulajdonságát a következő böngészők támogatják: Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.
Nagyon jó :) Az olyan böngésző, mint az Internet Explorer a 9.0-s verzióig nem támogatja az átlátszatlanság tulajdonságot, és az átláthatóság megteremtéséhez ehhez a böngészőhöz szűrő tulajdonságot és értéket kell használni az alfa(Opacity=X), ahol X egy 0 és 100 közötti egész szám, amely meghatározza az átláthatóság szintje. A 0 a teljes átlátszóságot, a 100 a teljes átlátszóságot jelenti.
A 3.5-ös verzió előtti Firefoxtól kezdve az opacity helyett a -moz-opacity tulajdonságot támogatja.
Az olyan böngészők, mint a Safari 1.1 és a Konqueror 3.1, amelyek a KHTML-motorra épülnek, a -khtml-opacity tulajdonságot használják az átláthatóság szabályozására.
Hogyan lehet beállítani az átláthatóságot a CSS-ben, hogy minden böngészőben ugyanúgy nézzen ki? Az elemek átlátszóságát biztosító böngészők közötti megoldás létrehozásához nem csak egy átlátszatlansági tulajdonságot kell regisztrálniuk, hanem a következő tulajdonságkészletet:
szűrő: alpha(Opacity=50); /* Átlátszóság az IE-hez */ -moz-opacity: 0,5; /* Mozilla 3.5 és régebbi verziók támogatása */ -khtml-opacity: 0,5; /* Konqueror 3.1 és Safari 1.1 támogatása */ átlátszatlanság: 0,5; /* Minden más böngésző támogatása */ A különböző elemek átlátszósága Nézzünk néhány példát az átlátszóság beállítására bizonyos, az oldalon leggyakrabban használt elemeknél.
CSS kép átlátszósága.
Vegye figyelembe az áttetsző kép létrehozásának számos lehetőségét. A következő példában az első képen nincs átlátszóság, a másodikon 50%, a harmadikon pedig 30%.
Átlátszóság .im1 ( szűrő: alpha(Opacity=50); -moz-opacity: 0,5; -khtml-opacity: 0,5; átlátszatlanság: 0,5; ) .im2 ( szűrő: alpha(Opacity=30); -moz-opacity: 0,3 ; -khtml-átlátszatlanság: 0,3; átlátszatlanság: 0,3; )
Eredmény:
Átlátszóság a CSS-ben, amikor az egérmutatót egy kép fölé viszi.
Gyakran szükséges egy képet vagy bármely más elemet átlátszóvá tenni abban a pillanatban, amikor a kurzort fölé viszi. Ezt a :hover CSS pszeudoosztály segítségével lehet megtenni. Ehhez a képünknek két osztályt kell regisztrálnia, egy közönséges - ez lesz a kép inaktív állapota és a második osztály a pszeudoosztályúval: hover, itt meg kell adnia a kép átlátszóságát lebegteti a kurzort.
Átlátszóság .im1 ( szűrő: alpha(Opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; ).im1:hover ( szűrő: alpha(Opacity=50); -moz-opacity : 0,5; -khtml-opacity: 0,5; átlátszatlanság: 0,5; ) .im2 ( szűrő: alpha(Opacity=30); -moz-opacity: 0,3; -khtml-opacity: 0,3; átlátszatlanság: 0,3; ) .im2:hover (szűrő: alpha(Opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; )
Az eredményt a demóban láthatod.
CSS háttér átláthatóság
Itt emlékeznie kell arra, hogy az átlátszóság minden beágyazott elemre vonatkozik, és nem lehet nagyobb átlátszóság, mint a beágyazott elem.
Példaként adjunk meg egy oldal hátterű változatot, amely kép felhasználásával készült, és egy blokkot színes háttérrel, és 50%-os átlátszósággal.
Példa a kódra:
Átlátszóság BODY ( háttér: url(bg.png); /* Háttérkép */ ) .blok ( háttér: #FC0; /* Háttérszín */ kitöltés: 5 képpont; /* Kitöltés */ szín: #000000; /* Szöveg szín */ szűrő: alpha(Opacity=50); -moz-opacity: 0,5; -khtml-opacity: 0,5; opacity: 0,5; ) Szöveg
Íme a fenti kód eredménye:
| 
