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.
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).