CSS

HTML

COMPONENTS

CODE HUB

CSS Opacity Generator

Konfiguráció

Opacity

Osztály

Előnézet

Kód

opacity: 50%;

ReadyTools Academy

Tanulj HTML-t, CSS-t és JavaScriptet teljesen ingyen a ReadyTools Academy keretében.

Kövesd a tanulásodat, fejlődj a saját tempódban, és szórakozz közben! 🎯

Tanulás kezdése ingyen

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