Tedd átlátszóvá a háttér css-t. Háttér átlátszóság css - szürke átlátszó háttér. Átlátszó háttér példa
Az elem áttetsző hatása jól látható háttérképés széles körben elterjedt a különböző operációs rendszer mert stílusos és gyönyörű. A webdizájnban az áttetszőség is használatos, és az opacitás tulajdonságon vagy a háttérhez beállított RGBA színformátumon keresztül érhető el.
átlátszatlanság tulajdonság
Ennek a tulajdonságnak az a fő jellemzője, hogy az átlátszósági érték mindenre hatással van gyermek elemek belül, nem csak a háttérben. Ez azt jelenti, hogy mind a háttér, mind a szöveg áttetszővé válik, és az átlátszósági szintet nem fogja növelni a hozzáadással. táblázatban. Az 1. ábra a szöveg és a háttér megjelenését mutatja különböző átlátszatlansági értékekkel.
Az 1. példa bemutatja, hogyan lehet áttetsző dobozt létrehozni az opacitás használatával.
1. példa: Háttér egy weboldalon
HTML5 CSS3 IE 9+ Cr Op Sa Fx
RGBA
Általában a tervezés szerint csak az elem háttere legyen áttetsző, a szöveg pedig átlátszatlan az olvashatóság megőrzése érdekében. 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 í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-tól 1-ig van beállítva (1. ábra), míg a 0 a teljes átlátszóságot, az 1 pedig a szín átlátszatlanságát jelenti.
Rizs. 1. Az rgba használatának szintaxisa
A 2. példa bemutatja az RGBA formátum használatát áttetsző háttér létrehozására.
2. példa: Félig átlátszó háttér
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Ennek a példának az eredménye az ábrán látható. 2. A háttér átlátszatlansága 90%-ra van állítva.
Rizs. 2. Félig átlátszó háttér és átlátszatlan szöveg
Sziasztok. Amint azt bizonyára tudja, a háttér egy CSS-tulajdonság, amely lehetővé teszi a háttérszín beállítását vagy a háttérként való kép feltöltését. A CSS3 bevezette a lineáris és radiális színátmenetek létrehozásának lehetőségét is, de ez egy külön cikk témája. Ugyanebben szerettem volna elmondani, hogyan lehet beállítani az átlátszóságot a háttértulajdonsághoz css-ben.
Állítsa be az átlátszóságot a css háttérhez
Tehát mindez nagyon egyszerűen megtörténik egy olyan színes felvételi formátumnak köszönhetően, mint az rgba. Ha együtt dolgozik grafikus szerkesztők, akkor valószínűleg tudja, hogy az rgb színmód a következőket jelenti: a piros (piros), a zöld (zöld) és a kék (kék) arányát. Tehát az rgba szinte ugyanaz, csak még egy paramétert adunk hozzá - az átláthatóságot. Így van írva:
Háttérszín: rgba(173, 57, 22, 0,5)
Először is kifejezetten jelezzük, hogy a színt rgba módban állítjuk be. Ezután a három alapszín telítettségi értékét adjuk meg 0-tól 255-ig, ahol a 255 a legmagasabb telítettség. A negyedik paraméter az átláthatóságunk. Itt az érték 0-tól egyig van írva. Az 1 egy teljesen átlátszatlan elem, a 0 pedig egy teljesen átlátszó elem. Ennek megfelelően, ha 0-ra állítja, akkor a háttérszín egyáltalán nem lesz látható.
Most már tudja, hogyan állíthatja be a háttértulajdonság átláthatóságát a css-ben. Ehhez az rgba színmódot kell használnia. Van egy átlátszatlansági tulajdonság is, de ez a teljes elem egészére vonatkozik. Vagyis az átlátszatlanság alkalmazásakor a szövegre átlátszóság is alkalmazható, ami olvashatatlanná teszi azt.
Átlátszó háttér példa
Az áttetsző háttér előnyeit könnyű példával bemutatni. Például van egy általános oldal hátterünk. Így nézne ki a blokk, ha egyszínű fekete színt kapna:
És most állítsuk be ugyanazt a fekete színt a blokkhoz, de adjuk meg ezzel színformátum rgba, például 0,7-ben adja meg az utolsó értéket. Így fog kiderülni:
Most a blokk háttere áttetsző, és rajta keresztül látható a háttérkép. Ez a kép és a háttér csak illusztráció. Amint Ön is tudja, a css háttérben az átlátszóság jól jöhet, ha egy beágyazott elem hátterét úgy kell megjeleníteni, hogy közben ne takarja el a más rétegekben található háttereket.
Magát a színt nem nehéz beállítani az rgba segítségével. Mint már említettük, az első három betű a három alapszínt jelenti: piros, zöld és kék, vagy inkább ezek arányát (0-tól 255-ig). Különböző értékek beállításával milliónyi különböző színt kaphat, az áttetszőség pedig lehetővé teszi, hogy szükség esetén nagyon sok szép effektussal rukkoljunk elő az oldalra.
Leírás
Meghatározza egy elem háttérszínét. Bár ez a tulajdonság nem örököl tulajdonságokat a szülőjétől, mivel kezdő értékátlátszóra állítva a gyermekelemek háttérszíne megegyezik a szülőelem háttérszínével.
Szintaxis
háttérszín:<цвет>| átlátszó | örököl
Értékek
átlátszó Átlátszó hátteret állít be. inherit A szülő értékét örökli.HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
NÁL NÉL ezt a példát weblapelemeknél három különböző módokon háttérszín beállítások. A példa eredménye az ábrán látható. egy.
Rizs. 1. Alkalmazza a háttérszínt
Objektummodell
document.getElementById("elementID ").style.backgroundColor
Böngészők
Az Internet Explorer 7.0-s verzióig nem támogatja az öröklési értéket.
A CSS az opacity tulajdonságot használja átlátszó hatás létrehozásához.
Az IE8 és a korábbi verziók támogatnak egy alternatív tulajdonságot - filter:alpha(opacity=x) , ahol az "x" értéke 0 és 100 között lehet, minél kisebb az érték, annál átláthatóbb lesz az elem.
Az összes többi böngésző támogatja a szabványt CSS tulajdonság opacity , amely 0,0 és 1,0 közötti számot vehet fel, minél kisebb az érték, annál átláthatóbb lesz az elem:
Próbálja meg "Mutasson átlátszóságot
Pseudo-class: hover lehetővé teszi a változtatást megjelenés elemeket, ha az egérkurzort föléjük viszi. Ezt a funkciót használjuk arra, hogy a kép elveszítse átlátszóságát az egér lebegtetése közben:
Próbálja meg "Háttér átlátszósága
Van két lehetséges módjai az elem átlátszóvá tétele: a fent leírt opacitás tulajdonság, valamint a háttérszín megadása RGBA formátumban.
Lehet, hogy már ismeri az RGB színmegjelenítési modellt. RGB (Red, Green, Blue – piros, zöld, kék) - színrendszer, amely a vörös, zöld és kék keverésével határozza meg az árnyalatot. Ha például a szöveg színét sárgára szeretné állítani, használhatja a következő deklarációk bármelyikét:
Szín: rgb(255,255,0); szín: rgb(100%,100%,0);
Az RGB-ben megadott színek eltérnek az általunk eddig használt hexadecimális értékektől, mivel lehetővé teszik az átlátszóság alfa csatornájának használatát. Ez azt jelenti, hogy az alatta lévő egy alfa-átlátszó elem hátterén keresztül fog megjelenni.
Az RGBA színdeklaráció szintaxisában hasonló a szabványos RGB-szabályokhoz. Többek között azonban az értéket RGBA-ként kell deklarálnunk (RGB helyett), és a színérték után egy további decimális átlátszósági értéket kell beállítanunk 0,0 (teljesen átlátszó) és 1 (teljesen átlátszatlan) között.
Szín: rgba(255,255,0,0,5); szín: rgba(100%,100%,0,0,5);
Az átlátszatlanság tulajdonság és az RGBA között az a különbség, hogy az átlátszatlanság tulajdonság a teljes elemre átlátszóságot alkalmaz, azaz az elem teljes tartalma átlátszóvá válik. Az RGBA pedig lehetővé teszi az átlátszóság beállítását az elem egyes részeihez (például csak szöveg vagy háttér):
Törzs ( háttérkép: url(img.jpg); ) .prim1 (szélesség: 400px; margó: 30px 50px; háttérszín: #ffffff; szegély: 1px tömör fekete; betűsúly: félkövér; átlátszatlanság: 0,5; szűrő : alfa(átlátszatlanság=70); /*IE8 és korábbi verziókhoz*/ szöveg igazítása: középre; ) .prim2 (szélesség: 400px; margó: 30px 50px; háttérszín: rgba(255,255,255,0,5); szegély: 1px tömör fekete; betűsúly: félkövér; szövegigazítás: középre; ) Próbáld ki »
Megjegyzés: Az RGBA értékeket az IE8 és újabb verziók nem támogatják korai változatai. A színvisszaállítás deklarálásához régebbi böngészőkhöz, amelyek nem támogatják az alfa-csatornák színértékeit, először az RGBA érték előtt adja meg: background: rgb(255,255,0); háttér: rgba(255,255,0,0,5);
Az RGBa CSS tulajdonság lehetővé teszi, hogy háttérszínt állítson be egy alfa-csatornával (vagyis a blokkokat áttetsző színnel töltse ki).
Természetesen a CSS-nek van átlátszatlansági tulajdonsága, de a fő hátránya az, hogy egy transzparens blokkon belül minden gyermekelem is örökli az átlátszóságát.
Leggyakrabban egy pixeles PNG24-gyel töltik ki az elem hátterét és IE6-ban rögzítik az átlátszóságot, vagy css opacitás segítségével teszik átlátszóvá a hátteret is. A szöveg már egy másik elemben külön van elhelyezve, de ez véleményem szerint nem túl kényelmes ...
Használva RGBa a megoldás így néz ki:
1. Tegyük fel, hogy kék hátteret szeretnénk 50%-os átlátszósággal.
És nem támogatja az IE6–8, az Opera 9.x, Mozilla Firefox 2.x
2. IE esetén megpróbálhatja elegánsabbá tenni:
| .element( background : transparent ; filter:progid :DXImageTransform .Microsoft .gradient(startColorstr= #990000ff , endColorstr= #990000ff ) ; zoom: 1 ; ) |
Jegyzet: A szűrő színe 8 számmal állítható be. Az első 2 szám az átlátszóság mértékét jelzi: FF - teljesen átlátszatlan, 00 - átlátszó. A következő 6 szám a szokásos HTML színmegjelölés.
Az RGBa használata nem korlátozódik a blokkok háttérszínére…