CSS
HTML
COMPONENTS
CODE HUB
CSS Grayscale Generator
Konfiguráció
Grayscale
Osztály
Előnézet
Kód
Tanulj meg kódolni Larával
Sajátítsd el a programozási alapokat lépésről lépésre az interaktív AI tutorod segítségével. Lara elmagyarázza a komplex logikát, átnézi a gyakorló feladataidat, és segít szilárd alapokat építeni a szoftverfejlesztésben.
Interaktív kódolási leckék a saját tempódra szabva.
Tanulás indítása LarávalCSS Grayscale Generator
A CSS-ben a Graysale hatást a "filter" tulajdonság segítségével alkalmazhatja elemekre, például képekre vagy szövegre. A Graysales az elem színeit szürkeárnyalatúvá alakítja, így fekete-fehér megjelenést kölcsönöz neki.
Íme, hogyan alkalmazhatja a grayscale hatást CSS-ben:
.grayscale-element {
filter: grayscale(100%);
}
ebben a példában:
- A ".grayscale-element " osztály a grayscale hatást alkalmazza a célzott elemre.
- "grayscale(100%)" azt adja meg, hogy az elem teljesen szürkeárnyalatos legyen, ami azt jelenti, hogy minden színt szürkeárnyalatúvá konvertál.
Itt egy másik példa részleges szürkeárnyalatokkal:
.partial-grayscale-element {
filter: grayscale(50%);
}
Ebben az esetben a "partial-grayscale-element " osztály 50%-os szürkeárnyalat-hatást alkalmaz, így némi színt enged át.
A "szűrő" tulajdonság számos más vizuális hatás alkalmazására is használható, és sokoldalú eszköz a weboldalon található elemek megjelenésének javítására. Ne feledje, hogy a szűrő "tulajdonság" böngészőtámogatása eltérő lehet, ezért fontos, hogy a kompatibilitás biztosítása érdekében tesztelje a hatást különböző böngészőkben.