CSS
HTML
COMPONENTS
CODE HUB
CSS Opacity Generator
Konfiguráció
Opacity
Osztály
Előnézet
Kód
opacity: 50%;Learn to Code with Lara
Master programming concepts step-by-step with your interactive AI tutor. Lara explains complex logic, reviews your practice exercises, and helps you build a solid foundation in software development.
Interactive coding lessons tailored to your own pace.
Start learning with LaraCSS Opacity Generator
A CSS-ben a HTML-elemek átlátszóságát (átlátszóságát) az "opacity" tulajdonság segítségével szabályozhatja. Az "opacity tulajdonság 0 és 1 közötti értéket fogad el, ahol a 0 teljesen átlátszó (láthatatlan), az 1 pedig teljesen átlátszatlan (teljesen látható).
Íme, hogyan használhatja az opacitás tulajdonságot a CSS-ben:
.opacity-element {
opacity: 0.5;}
Ebben a példában:
Az ".opacity-element osztály 50%-ra állítja az elem átlátszatlanságát, így az félig átlátszóvá válik.
Az "opacitás" tulajdonság értékét úgy állíthatja be, hogy szabályozza az elem kívánt átlátszóságának mértékét. Például az "opacity: 0.2; nagyon átlátszóvá teszi az elemet, míg az " opacity: 0.8; csak enyhén átlátszóvá teszi.
Íme egy másik példa teljes átlátszatlansággal és egy lebegőhatással, amely megváltoztatja az átlátszatlanságot az egér lebegtetésekor:
.full-opacity-element {
opacity: 1;
transition: opacity 0.3s;
}
.full-opacity-element:hover {
opacity: 0.7;
}
Ebben az esetben:
- A .full-opacity-element: osztály kezdetben teljesen átlátszatlanná (100%-os átlátszatlanság) teszi az elemet.
- A "transition" tulajdonság egy sima átmenetet ad az átlátszatlanság változásához.
- Lebegtetéskor (".full-opacity-element:hover") az átlátszatlanság 70%-ra csökken, ami lebegő hatást kelt.
Az átlátszatlanság tulajdonságot általában lebegőhatások, halványuló animációk létrehozására vagy az elemek láthatóságának a felhasználói interakciók alapján történő beállítására használják. Hasznos eszköz az elemek átláthatóságának szabályozására és a webhely dizájnjának mélységgel való megtöltésére.