Hogyan állíthatjuk be az opacitást a háttérben

5 példák, amelyek segítenek megérteni, hogyan működik a CSS opacity

A CSS Opacity tulajdonság használatával ellenőrizheti a CSS átláthatóságát a HTML elemek egy weboldal, például szöveg, képek vagy háttér. Ebben a cikkben elmondjuk ezt a tulajdonságot, és néhány példát is adunk.

Az “áttetsző” kifejezés a teljesen látható objektumok leírására szolgál. A weboldalon a fedettség az értéke az Opacity 1 tulajdon, és teljesen átlátszó & #; Opacity 0. Alapértelmezésben minden elemnek Opacity értéke 1.

Az érték 0-tól 1 meghatározza az átláthatóság az elem. Például az alábbi kódot csökkenti CSS átláthatóság felére:

Elem fényelnyelés 0 lesz teljesen láthatatlan, de ez még mindig foglalják a fizikai teret az oldalon. Ezért, hogy egy elem látható, akkor kell használni a fedettség ingatlan CSS, valamint a láthatóság tulajdonság.

Az opacitást a CSS3-ban vezették be, és a böngészők jól támogatották. Ha a projekthez az Internet Explorer 8 vagy a korábbi verziókhoz szükséges, akkor az MS Alpha szűrő tulajdonságot az alábbiak szerint kell használni:

Div {Opacity :; Szűrő: Alpha (Opacity = 50); }

Megjegyezzük, hogy az átláthatóság a CSS háttér lehet meghatározni decimális értékek 0-1, és az átlátszóságát az alfa szűrő & #; 0% -tól%.

Az átláthatóság az egész elemre egyenletesen érvényes. A gyermekelemek átlátszatlansága a szülei tulajdonától is függ. Az átláthatóság különböző szintjeinek elérése érdekében különböző opacitás értékeket kell használni a szülő és a gyermekelemek számára. Például:

#Parent {opacity:} #child {opacity:}

A következő példák azt mutatják, hogy a gyermekelemek hogyan befolyásolják a szüleik átlátszatlanságát:

Az első példában mindkét mező esetében az opacitás 1. A második példában az anyavállalat (fekete) opacitása és leányvállalata (narancssárga) & #; 1. A harmadik, a szülő elem fényelnyelés, leányvállalata – figyelni, hogy a különbség a színe a hang (átláthatóság) a narancssárga mezőben mindhárom példában.

Az átlátszatlanság tulajdonság használatával könnyedén hozzáadhat átláthatósági háttér CSS-t a képekhez. Tegyük fel, hogy ugyanazt a képet jelenítsük meg az oldalon kétszer. A következő kód átláthatóvá teszi a második képet:

# img1 {opacity: 1} # img2 {opacity:}

Ennek eredményeként a következőket kapjuk:

Azt is beállíthatja CSS átláthatóságát képek vagy más HTML-elemeket, ha lebeg a kurzort. Ehhez az előző példában meg kell változtatnia az átlátszatlanság tulajdonságának értékét. A következő kód átláthatóvá teszi a képet, amikor az egérmutatót lebegíti:

# IMG1 {Opacity: 1} # IMG1: Hover {Opacity:} IMG ID = “IMG1” SRC = “Hab” /

Állítsa be a háttér átlátszatlanságát két módon. Az első az átlátszatlanság értékét jelzi, ahogy az előző példákban történt:

Másodszor meg kell adnia az Alpha csatorna értékét az RGBA (piros, zöld, kék, alfa) a háttérnyilatkozatban. Ez az alábbiak szerint történik:

Div {háttér: RGBA (0, 0, 0,); }

Az R, G és B értékeinek megváltoztatása az átlátszó háttér CSS-t kaphat bármilyen színből. Hasonlóképpen az átlátszó szülőelemeken belül átlátszatlan leányvállalatokat kaphat. Általános szabályként a szülőelem átlátszatlanságának értéke magasabb, mint a leányvállalaté. Az átlátszó háttér használatával azonban leányvállalatokat készíthet, miközben fenntartja a konténer átláthatóságát.

Ha nagy keretet használ, és át kell használni őket, akkor be kell állítania az alfa-csatorna értékét a keret színéhez, amint az a következő példában látható:

.Image-Box {Border: 15PX Solid RGBA (0, 0, 0,); }

Ehhez a CSS-opactikai tulajdonságok megfontolása. A tulajdonság különböző felhasználásának példáit vezettük, és remélem, hogy segítenek jobban megérteni, hogyan működik.

Hadd tudjam meg, mit gondolsz a cikk ezen témáján a megjegyzésekben. Megjegyzések, válaszok, huskies, előfizetések, dyslaike hatalmas köszönöm!

Vadim Twiser-Fordító-fordító Cikk “5 példa arra, hogy megértsük, hogyan működik CSS opacity”