התאמת תמונה עם אפקטים מסנן CSS

התאמת התמונה בהירות ו בניגוד, או להפוך את התמונה גווני אפור או ספיה היא תכונה נפוצה שאתה עלול למצוא ביישום עריכת תמונות, כמו Photoshop. אבל, עכשיו זה אפשרי להוסיף את אותן השפעות על תמונות אינטרנט באמצעות CSS.

יכולת זו באה מסנן אפקטים אשר למעשה הוא עדיין בשלב טיוטה עבודה. עם זאת, הדפדפן Webkit נראה צעד צעד בראש יישום תכונה זו.

אז בואו ננסה, ונשתמש בתמונה זו מהדי חה כדי להדגים את ההשפעות.

האפקטים

החלת ההשפעות היא קלה מאוד. תסתכל על קטע למטה, על מנת להפוך את התמונות גווני אפור;

 img -webkit-filter: גווני אפור (100%);  

... וזה בשביל ספיה על.

 img -webkit-filter: ספיה (100%);  

גם את ספיה וה גווני אפור ערכים מוצגים באחוזים 100% הוא המקסימום והחל 0% ישמור את שינוי התמונה, אך כאשר הערך אינו מצוין במפורש 100% יילקח כברירת המחדל.

הבהרת התמונה היא גם אפשרית, ואנחנו יכולים לעשות את זה באמצעות בהירות פונקציה, כדלקמן;

 img -webkit-filter: בהירות (50%);  

אפקט בהירות עובד כמו ניגודיות אפקט ספיה מעל שם את הערך של 0% ישמור את התמונה כפי שהיא והחלה 100% יהיה לגמרי להאיר את התמונה, אשר עשוי להראות רק דף לבן ריק במקום תמונה.

השפעת הבהירות גם מאפשר ערכים שליליים, שבו זה יהיה להכהות את התמונה.

 img -webkit-filter: בהירות (-50%);  

... ואנחנו יכולים להתאים את התמונה בניגוד זה.

 img -webkit-filter: ניגודיות (200%);  

יש הבדל קטן על איך הערך עובד גם, כפי שאתה יכול לראות לעיל, קבענו את בניגוד() על ידי 200%, זה בגלל הערך של 100% היא נקודת ההתחלה שבה התמונה תישאר ללא שינוי. כאשר הערך הוא למטה 100%, נניח 50%, התמונה תהיה ניגוד פחות.

בנוסף, אנו יכולים לשלב את האפקט בבלוק הכרזה אחד, כמו בדוגמה הבאה. אנחנו הופכים את התמונה גווני אפור ולהגדיל את בניגוד ב -50% במקביל.

 img -webkit-filter: גווני אפור (100%) בניגוד (150%);  

על ידי שילוב המסנן עם המעבר CSS3 אנחנו יכולים לעשות חינני לרחף השפעה.

 img: רחף -webkit-filter: גווני אפור (0%);  img: רחף -webkit-filter: ספיה (0%);  img: רחף -webkit-filter: בהירות (0%);  img: רחף -webkit-filter: ניגודיות (100%);  

לבסוף, יש עוד אפקט אחד שאנחנו יכולים לנסות; ה טישטוש גאוסיאני, אשר יהיה לטשטש את האלמנט ממוקד.

 img: רחף -webkit-filter: טשטוש (5px);  

כמו ב- Photoshop, ערך הטשטוש מצוין ברדיוס של פיקסל ואם הערך אינו מצוין במפורש, 0 יילקח כברירת המחדל והתמונה תישאר כפי שהיא.

מחשבה סופית

יש למעשה הרבה יותר אפקטים מפרט. כמו לסובב את הגוון, הפוך ו רוויה, אבל אני חושב שהם מיושמים פחות במקרים אינטרנט אמיתיים. לפיכך, הדיון היה מוגבל רק ארבעה תופעות.

בנוסף, למרות הדיון מוחל על תמונות במדריך זה, הנכס יכול למעשה להיות מיושם גם על כל רכיב DOM.

לבסוף, תוכל להציג את ההדגמה החיה מהקישורים הבאים. שים לב שהמסנן נתמך כרגע רק ב 19 Chrome ומעל.

• הדגמה
• הורד מקור