Hogyan készítsünk egy átlátszó hátteret css
Helló kedves olvasók!
Ebben a cikkben szeretnék beszélni veled erről a nagyon érdekes hatásokat, mint az átláthatóságot a különböző elemek a helyszínen, hanem, hogyan kell beállítani a CSS háttér átlátszósága vagy más egység a helyszínen oldalon.
Mozgás a cikket:
Mivel az alapot a helyén, azt szeretné, hogy érdekes és egyéni design. Számos speciális effektusok, működési módszerek és a különböző trükköket, hogy lehet használni, hogy elérjék a kívánt design. Így különösen a CSS3 funkciókat lehet elérni valóban lenyűgöző eredményeket.
Hála CSS háttér átlátszósága valósítható meg a két legegyszerűbb módja:
- 1. A CSS-tulajdonság fedőképesség.
- 2. A RGBA formátum beállításához a háttérben.
Egy css-fényelnyelés tulajdonság
Opacity egy sokoldalú eszköz, és vele lehet beállítani a kívánt szintű átláthatóságot a css bármely elem az oldalon, és a háttérben.
Syntax tulajdonságai CSS:
ahol az érték a tartományban 0,0 (az elem teljesen átlátszó) 1,0 (teljesen átlátszó elem).
Így például, hogy egy blokk fon osztályban. és kérni kell, az egyértelműség kedvéért, a háttérképet. Ez az egység elhelyezése két blokk a szöveg és opas1 opas2. amelyhez meghatározzák fekete háttér. Ezután a második blokk számára tárolja az értékeket opacitás egyenlő 0,3.
Itt van, mi történik:
Blokk átláthatóság nélkül
Kimutatása tulajdonságok css fényelnyelés
Mint látható, css tulajdonság munka, az egység az osztály opas2 átlátszóvá vált, és rajta keresztül felismerni a háttérképet.
De van egy kellemetlen pillanatot. Mint látható, a szöveg halvány, azaz világossá vált is. Ez történt annak a ténynek köszönhető, hogy minden gyermek elemek a blokk, a mi esetünkben - a szöveg, örökölt átláthatóság meghatározott css.
Kiderült, hogy a css-tulajdonság tudjuk használni, hogy egy átlátszó blokk az oldalon csak akkor, ha nem tartalmaz szöveget.
És mi a teendő, ha azt akarjuk, hogy adja meg a css háttér átlátszósága az egység számára, de ne zavarja az szöveget tartalmazott ez?
háttér feladat RGBA
Kerüljük ezt a problémát, akkor abban az esetben, ha feladjuk a használatát fényelnyelés és értéket adni css-tulajdonságok háttér RGBA formátumban.
RGBA formátum lehetőséget nyújt arra, hogy a szín a vörös, zöld és kék színben, valamint egy tizedes, valamint lehetővé teszi, hogy hozzanak átláthatóságát használata révén az alfa-csatorna. A szint alfa van állítva a tartomány 0-ról 1 Azaz, ahogy a fényelnyelés css-tulajdon.
Mint ez:
háttér: RGBA (255,255,255,0.6);
Az érthetőség kedvéért, adjunk hozzá egy blokkot a háttérben egy másik eleme, hogy a szöveget, amelyhez meghatározza a css háttérben RGBA méret 0,3 fokú átláthatóság.
Ez az, amit megvan:
Blokk átláthatóság nélkül
Demonstráció a css-fedőképesség tulajdonság
Itt látható a háttérben RGBA