CSS
HTML
COMPONENTS
CODE HUB
CSS Contrast Generator
Konfiguráció
Contrast
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 Contrast Generator
A CSS Contrast tulajdonság lehetővé teszi, hogy számos képszerkesztési hatást alkalmazzon egy HTML-elemre, például egy képre vagy egy szövegdobozra. Az egyik ilyen hatás a kontraszt, amely lehetővé teszi egy elem kontrasztjának beállítását.
A kontrasztérték határozza meg, hogy a kép színei mennyire térnek el az eredetitől. Egy magasabb kontrasztérték növeli a színek közötti különbséget, míg egy alacsonyabb érték csökkenti ezt a különbséget.
Íme egy példa arra, hogyan használhatja a kontraszt tulajdonságot a CSS-ben:
img {
filter: contrast(100%);
}
img.high-contrast {
filter: contrast(150%);
}
img.low-contrast {
filter: contrast(70%);
}
Ebben a példában a szűrő tulajdonságot egy három különböző kontrasztértékkel rendelkező képre alkalmazzuk. Az alapértelmezett érték 100%, ami nem változtatja meg a kontrasztot. A "magas kontrasztú" és az "alacsony kontrasztú" osztályokhoz rendelt értékek növelik, illetve csökkentik a kontrasztot.
Fontos megjegyezni, hogy a szűrő tulajdonság támogatása böngészőnként eltérő lehet, és nem minden böngésző biztosítja ugyanazokat a szűrési hatásokat. Ellenőrizze a böngésző kompatibilitását, és tesztelje a kívánt hatásokat több böngészőben, hogy megbizonyosodjon a megfelelő működésről.