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.
| Érték | Hatás |
|---|---|
| 1 | Teljesen átlátszatlan |
| 0.5 | 50%-os átlátszóság |
| 0 | Teljesen átlátszó |
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.
✨ Kérdezd Larát — a tanulási partnered
Fedezd fel a személyre szabott tanulási támogatást. Lara elmagyarázza az anyagot, összefoglalja a témákat és megválaszolja a kérdéseidet — az Go csomagtól elérhető.
Lara segít gyorsabban tanulni — kizárólag a ReadyTools Go, Plus és Max tagoknak.
