להלן התוצאות של מאמר זה:
בואו נתחיל!
שנה צבע תמונה ב-CSS
כדי לשנות את צבע התמונה ב-CSS, תחילה למד על מאפיין הסינון והפונקציות שלו. כך תקבלו הבנה טובה יותר.
מסנן נכס CSS
כדי לשלוט באפקט החזותי של מאפיין מסנן תמונה של CSS משמש. אפקטים חזותיים הם:
- לְטַשׁטֵשׁ
- בְּהִירוּת
- התאמת צבע
- טיפת צל
- אֲטִימוּת
תחביר של מאפיין מסנן
התחביר של מאפיין המסנן הוא:
לְסַנֵן : לְטַשׁטֵשׁ ( ) | טיפת צל ( ) | אֲטִימוּת ( )- לְטַשׁטֵשׁ(): משמש להחלת אפקט טשטוש על התמונה.
- drop-shadow(): ליצור צל על תמונה.
- אֲטִימוּת(): משמש להוספת שקיפות לתמונה.
אנו יכולים להשתמש במספר מסננים באמצעות מאפיין הסינון הזה. מאמר זה עוסק כיצד לשנות את צבע התמונה, אז כאן נסביר כיצד להשתמש בפונקציות drop-shadow(), ו-opacity() איתה.
drop-shadow()
drop-shadow() היא פונקציה מובנית של CSS המאפשרת להגדיר צל לכל אלמנט או תמונה. הפרמטרים הבאים משמשים בפונקציה drop-shadow() כדי לשנות את הצבע של תמונה:
- offset-x: הוא משמש להוספת צל אופקי.
- offset-y: צללים מתווספים אנכית באמצעות זה.
- צֶבַע: צללים נצבעים עם פרמטר זה.
כדי להבהיר את הנקודות הללו, נעבור לתחביר של צל:
טיפת צל ( צבע offset-x offset-y )- offset-x ו-offset-y יכולים להיות חיוביים או שליליים.
- באופקי, ערך חיובי משמש להוספת ההשפעות בצד ימין, ושלילי הוא עבור הצד השמאלי.
- באנכי, הערך החיובי הוא עבור הצד התחתון, והשלילי הוא עבור העליון.
- במקום הצבע תוכלו להקצות כל צבע שתרצו לתת לתמונה.
אֲטִימוּת()
opacity() משמש להוספת שקיפות לאלמנט או לכל תמונה. התחביר של האטימות() הוא:
אֲטִימוּת ( מספר ) ;כאן ' מספר ” אני s משמש להגדרת רמת האטימות בין 0.0 ל-1.0. כדי להפוך תמונה לשקופה לחלוטין, אתה יכול להגדיר אותה כ-0.0.
כדי להבהיר את נקודות האזכור לעיל, הבה נעבור לדוגמא.
כיצד לשנות צבע תמונה ב-CSS?
בדוגמה הבאה, ראשית, נוסיף תמונה באמצעות תג :
< img מעמד = 'תמונה' src = 'image.jpg' הכל = '' >
< / גוּף >
לפני החלת מאפיין המסנן, התוצאה הייתה כזו:
כדי לשנות את הצבע של תמונה, בואו נעבור ל-CSS ונחיל עליו את מאפיין הסינון. נגדיר את האטימות ל-0.5 לשקיפות התמונה. בפונקציה drop-shadow() הערך של offset-x ו-offset-y הוא 0 כי אנחנו רוצים לשנות רק את הצבע של תמונה.
.תמונה {לְסַנֵן : אֲטִימוּת ( 0.5 ) טיפת צל ( 0 0 חום ) ;
}
להלן התוצאה הסופית לאחר היישום:
צבע התמונה השתנה בהצלחה.
סיכום
כדי לשנות את הצבע של תמונה, שתי פונקציות CSS: opacity() ו- drop-shadow() משמשות עם המאפיין filter. opacity() מציין את השקיפות של התמונה ו- drop-shadow() מקצה צבע וצל לתמונה. כתבה זו הסבירה את השיטה לשינוי הצבע של תמונה באמצעות CSS.