CSS Opacity (átlátszóság)

Az opacity tulajdonság segítségével beállíthatjuk, mennyire legyen átlátszó egy elem. Az érték 0 és 1 közötti szám, ahol a 0 teljesen átlátszó, az 1 pedig teljesen átlátszatlan.

Az opacity értékei

Az opacity értékek 0 és 1 között változnak. Ez teszi lehetővé a finom áttűnéseket, átlátszó rétegeket és vizuális hatásokat.

Alap példák opacity használatára

Az alábbi példában három dobozt látunk különböző opacity értékekkel: 1, 0.5 és 0.

A három doboz közül az első teljesen átlátszatlan, a második félig átlátszó, a harmadik pedig láthatatlan.

Opacity hover effektushoz

Az opacity gyakran használatos hover effektusokban. Így például az elem alapból halványabb, de rámutatáskor teljesen láthatóvá válik.

Tippek az opacity használatához

Az opacity sokféleképpen kombinálható más CSS tulajdonságokkal. Íme néhány javaslat:

• Használd overlay rétegek készítéséhez, például sötétített háttérhez modálablaknál.
• Érdemes transition-nel kombinálni, hogy finom áttűnést hozz létre.
• Ne feledd, hogy az opacity az elem minden gyermekére is hatással van.