Íme a cikk eredményei:
Kezdjük!
Kép színének módosítása a CSS-ben
A kép színének CSS-ben történő megváltoztatásához először ismerkedjen meg a szűrő tulajdonságával és funkcióival. Így jobban megértheted.
szűrő CSS tulajdonság
A képszűrő vizuális hatásának szabályozására a CSS-t használják. A vizuális effektusok a következők:
- elhomályosít
- Fényerősség
- színbeállítás
- árnyék
- átlátszatlanság
Szűrőtulajdonság szintaxisa
A szűrő tulajdonság szintaxisa a következő:
szűrő : elhomályosít ( ) | árnyék ( ) | átlátszatlanság ( )- elhomályosít(): elmosódás hatásának alkalmazására szolgál a képen.
- árnyék(): árnyékot hozzon létre a kép fölé.
- átlátszatlanság(): a kép átlátszóságának növelésére szolgál.
Ezzel a szűrő tulajdonsággal több szűrőt is használhatunk. Ez a cikk a kép színének megváltoztatásáról szól, ezért itt elmagyarázzuk, hogyan kell használni a drop-shadow() és az opacity() függvényeket.
árnyék()
A drop-shadow() a CSS beépített funkciója, amely lehetővé teszi bármely elem vagy kép árnyék beállítását. A következő paramétereket használja a drop-shadow() függvény a kép színének megváltoztatására:
- offset-x: Vízszintes árnyék hozzáadására szolgál.
- offset-y: Az árnyékok függőlegesen kerülnek hozzáadásra ezzel.
- szín: Az árnyékok színezése ezzel a paraméterrel történik.
E pontok tisztázása érdekében térjünk át a drop-shadow szintaxisára:
árnyék ( offset-x offset-y szín )- offset-x és offset-y lehet pozitív vagy negatív.
- Vízszintes módban a pozitív érték a jobb oldali effektusok hozzáadására szolgál, a negatív pedig a bal oldalon.
- Függőlegesen a pozitív érték az alsó, a negatív pedig a felső.
- A szín helyén tetszőleges színt rendelhetünk a képhez.
átlátszatlanság()
Az opacity() az elem vagy bármely kép átlátszóságának növelésére szolgál. Az opacity() szintaxisa a következő:
átlátszatlanság ( szám ) ;Itt ' szám ” én s az átlátszatlanság szintjének beállítására szolgál 0,0 és 1,0 között. A kép teljesen átlátszóvá tételéhez 0,0-ra állíthatja.
A fenti pontok tisztázására térjünk át a példára.
Hogyan lehet megváltoztatni a kép színét a CSS-ben?
Az alábbi példában először egy képet adunk hozzá az címkével:
< img osztály = 'kép' src = 'kép.jpg' minden = '' >
< / test >
A szűrőtulajdonság alkalmazása előtt az eredmény a következő volt:
Egy kép színének megváltoztatásához térjünk át a CSS-re, és alkalmazzuk rá a szűrő tulajdonságot. Az átlátszóságot 0,5-re állítjuk a kép átlátszósága érdekében. A drop-shadow() függvényben az offset-x és offset-y értéke 0, mert csak egy kép színét akarjuk megváltoztatni.
.kép {szűrő : átlátszatlanság ( 0.5 ) árnyék ( 0 0 barna ) ;
}
Íme a végeredmény a megvalósítás után:
A kép színe sikeresen megváltozott.
Következtetés
A kép színének módosításához két CSS-függvény: az opacity() és a drop-shadow() használatos a szűrő tulajdonsággal. Az opacity() a kép átlátszóságát határozza meg, a drop-shadow() pedig színt és árnyékot rendel a képhez. Ez az írás elmagyarázta a kép színének CSS használatával történő megváltoztatásának módszerét.