A CSS átlátszatlansági tulajdonsága és a kép átlátszatlansága megmagyarázva

A opacitytulajdonság szabályozza, hogy egy elem mennyire átlátszatlan a 0,0–1,0 skálán. Minél alacsonyabb az érték, annál átláthatóbb az elem.

Kiválaszthatja, hogy mennyire szeretné átlátszóvá tenni az elemet. Az átláthatósági szint eléréséhez hozzá kell adnia a következő CSS tulajdonságot.

Teljesen átlátszatlan

.class-name { opacity: 1; } /* OR */ .class-name { opacity: 1.0; }

Félig átlátszó

.class-name { opacity: 0.5; }

Teljesen átlátszó

.class-name { opacity: 0; } /* OR */ .class-name { opacity: 0.0; }

Alternatív megoldásként rgbabeállíthatja az elem átlátszatlanságát:

.class-name{ background-color: rgba(0, 0, 0, .5); }

Ez background-coloregy elemet fekete színre állítja , 50% -os opacitással. Az érték utolsó értéke rgbaaz alfa érték . Az 1 alfa-érték egyenlő a 100% -os átlátszatlansággal, és a 0,5 (vagy .5, mint a fenti) egyenlő az 50% -os opacitással.

Kép átlátszatlansága és átlátszósága

A opacitytulajdonság lehetővé teszi, hogy átlátszóvá tegye a képet, csökkentve az átlátszatlanságát.

Opacity 0,0 és 1,0 közötti értéket vesz fel.

1.0 az alapértelmezett érték bármely képhez. Teljesen átlátszatlan.

Példa

img { opacity: 0.3; }

Tartalmazza filter: alpha(opacity=x)az IE8 és korábbi verziókhoz. Az x értéke 0-100.

img { opacity: 0.3; filter: alpha(opacity=30); }

Íme egy példa a fenti példában megadott paraméterekre beállított képre.

kép 30% -os átlátszatlanság mellett

Akkor párosítani opacitya :hoverhogy hozzon létre egy dinamikus egérrel hatást.

Példa:

img { opacity: 0.3; filter: alpha(opacity=30); } img:hover { opacity: 1.0; filter: alpha(opacity=100); }

Kódtoll példa átlátszó kép átlátszatlanná tételéhez az egérrel

Ezzel ellentétes hatást hozhat létre kevesebb kóddal, mivel a kép alapértelmezés szerint 1,0 opacitású

Példa:

img:hover { opacity: 0.3; filter: alpha(opacity=30); }

Itt van egy kódtollas példa, amely megmutatja az átlátszóságot az egérrel.

További információ a CSS-ről

Lépcsőzetes stíluslapok (CSS)

A CSS a Cascading Style Sheets rövidítése. Először 1996-ban találták ki, és ma már az összes nagyobb webböngésző alapfunkciója.

A CSS lehetővé teszi a fejlesztők számára, hogy az oldal HTML-struktúrájának „stílusával” szabályozzák a weboldalak megjelenését.

A CSS specifikációkat a World Wide Web Consortium (W3C) tartja fenn.

Csak CSS-ben meglehetősen elképesztő dolgokat építhet, például ezt a tiszta CSS Aknakereső játékot (amely nem használ JavaScript-et).