Press "Enter" to skip to content

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

Comments are closed, but trackbacks and pingbacks are open.