Hogyan lehet a CSS átláthatóságot tenni

Hello, kedves olvasók!

Ebben a cikkben szeretnék beszélni veled egy ilyen meglehetősen érdekes hatással, mint átláthatóság a különböző tételek a helyszínen, vagy inkább, hogyan lehet beállítani a háttér vagy bármely más blokk átláthatóságát a CSS használatával az oldal oldalon.

A webhely létrehozásának kezdete mindig érdekes és egyéni tervezést szeretne tenni. Számos speciális effektus létezik, munkameglikáció és különböző trükkök, amelyekkel elérheti a kívánt kialakítást. Tehát különösen a CSS3 képességek használatával valóban lenyűgöző eredményeket érhet el.

A CSS-nek köszönhetően a háttér átlátszósága két legegyszerűbb módon valósítható meg:

1. Hazing CSS tulajdonság ÁTLÁTSZATLANSÁG.
2. Haze RGBA formátum a háttérmunkához.

A CSS tulajdonságok átlátszatlanságának használata

ÁTLÁTSZATLANSÁG Egy univerzális eszköz, és vele beállíthatja az áttetszőség kívánt szintjét a CSS-ben mind az oldal bármely eleméhez, mind a háttérhez.

CSS tulajdonságok szintaxis:

Opacity: érték;

Ha az érték a tartományban van (az elem teljesen átlátszó), akkor (az elem teljesen átlátszó).

Tehát például egy osztályt készítünk Fon, És neki, kérjen láthatóságot, háttérképet. Ez a blokk két blokkot helyez meg szöveggel Opas1 és Opas2, amelyre fekete háttérrel állítottunk be. Ezt követően állítsa be az értéket ÁTLÁTSZATLANSÁG egyenlő

Ez történik:

Blokk átláthatóság nélkül

A CSS opacity tulajdonságainak bemutatása

HTML kód Példa:

Div osztály = “fon” Div osztály = “opas1” Blokk átláthatóság nélkül Div Div osztály = “opas2” A CSS opacity tulajdonságainak bemutatása Div Div

CSS kód:

1 2 3 4 5 6 7 nyolc kilenc tíz tizenegy 12 13 tizennégy 15 16 17 tizennyolc 19 húsz 21 22 23 24 25 26 27 28 29

.Fon { Háttér: URL (képek / Hab); widthpx; paddingpx; Margó: Auto; } .Opas1 { widthpx; paddingpx; Háttér: #; Margó: Auto; Szöveg-igazítás: Központ; marginpx; font-sizepx; Szín: #FFF; } .Opas2 { widthpx; paddingpx; Háttér: #; Margó: Auto; Szöveg-igazítás: Központ; Opacity; / * Átláthatósági szint a CSS-ben * / marginpx; font-sizepx; Szín: #FFF; }

Amint láthatja, a CSS-ingatlan dolgozott, egy osztályú blokk Opas2 átláthatóvá vált, és a háttérképet blokkolja.

De van egy kellemetlen pillanat. Amint észreveheti, a szöveg söpört, vagyis átláthatóvá vált. Ez azt jelentette, hogy a blokk minden gyermek eleme, ügyünkben a szöveg, a CSS-ben adott átláthatóságot örökölte.

Kiderül, hogy ez a CSS tulajdonság csak akkor használható, ha az átlátszó blokkot csak akkor adja meg, ha nem tartalmaz szöveget.

És mi a teendő, ha be kell állítani a háttér átlátszósága a blokk CSS, de ugyanakkor megtakarítás a szöveg érthetőségét benne foglalt?

Task háttér RGBA-ban

Elutasíthatjuk ezt a problémát, ha megtagadja a használatát ÁTLÁTSZATLANSÁG és állítsa be a CSS tulajdonságainak értékét formátumban Rgba.

Formátum Rgba Lehetővé teszi számunkra, hogy a szín értékét a piros, zöld, valamint a kék, a decimális formában, valamint lehetővé teszi, hogy az átláthatóságot az Alpha csatorna használatával állíthatja be. Az alfacsatorna szintje 0 és 1 közötti tartományban van beállítva. Vagyis az átlátszatlanság CSS-tulajdonában.
Például:
Háttér: RGBA (,,,);

Az érthetőség kedvéért egy újabb elem a szöveget, hogy a blokk a háttérben a szöveget, amit a háttér a CSS háttér a RGBA formátumú-e az átláthatóság szintjét

Ez az, amit tettünk:

Blokk átláthatóság nélkül

A CSS tulajdonságok átlátszatlanságának bemutatása

Úgy néz ki, mint a háttérben RGBA

Az oldalkódhoz a következő HTML-kód töredéket adtunk:

DIV osztály = “RGBA” Úgy néz ki, mint a háttérben RGBA Div

A CSS fájlban a következő tulajdonságokat töltöttem a megfelelő osztályhoz:

.RGBA { widthpx; paddingpx; Margó: Auto; Szöveg-igazítás: Központ; marginpx; font-sizepx; Szín: #FFF; Háttér: RGBA (0,0,0,); }

Ma van ma. A CSS3 képességeit ebben a cikkben ismertetett megadhat bármilyen szintű átláthatóságot CSS a kívánt blokk, amely segít elérni a legmegfelelőbb megjelenését a webhelyen. És remélem, hogy sikerült felfednöm a témát, és nem lesz nehézségei ezen technikák alkalmazásával.

Őszintén, Julia Hussar