קיימים מאפייני CSS, כגון תמונות רקע, תמונות גבול, מיסוך ותכונות חיתוך, שבאמצעותן תוכל להוסיף תמונות ישירות אל דפי אינטרנט ולשלוט בהתנהגות שלהם. עם זאת, יש גם פחות מזכירים לעתים קרובות תכונות CSS הקשורות לתמונה לעבוד על תמונות שנוספו עם תג HTML, אשר הדרך המועדפת של הוספת תמונות לדפי אינטרנט.
תיאור התפקיד של הנכסים האחרונים משתנה שליטה על צל התמונה ל הגדרת החדות, עוזר לנו לשלוט טוב יותר את המראה ואת המיקום של תמונות הוסיף עם תג. בואו נראה אותם אחד אחד.
1. חידוד תמונות באמצעות עיבוד תמונה
כאשר התמונה היא upscaled, הדפדפן מחליק את התמונה, אז זה לא נראה pixelated. אבל, בהתאם לרזולוציה של התמונה ואת המסך, זה לא יכול להיות הטוב ביותר בכל עת. ניתן לשלוט בהתנהגות דפדפן זו באמצעות עיבוד תמונה נכס.
זה נכס נתמך היטב שולט באלגוריתם המשמש לגודל תמונה. שני הערכים העיקריים שלה הם קצוות ו מפוקסל.
ה קצוות ערך שומר על ניגודיות הצבע בין פיקסלים. במילים אחרות, לא נעשית החלשה לתמונות, אשר נהדר עבור גרפיקה פיקסל.
מתי מפוקסל נעשה שימוש בפיקסלים הקרובים של פיקסל קח את הופעתו, מה שהופך אותו נראה כמו ביחד טופס פיקסל אחד גדול, נהדר עבור מסכי ברזולוציה גבוהה.
אם תמשיך להסתכל מקרוב על קצוות הפרחים ב GIF להלן, אתה יכול לראות את ההבדל בין רגיל א מפוקסל תמונה.
img תמונה-עיבוד: פיקסלים;
2. למתוח תמונות עם בכושר האובייקט
ה מכילים, כיסוי, למלא הערכים כולם מוכרים, אנו משתמשים בהם עבור גודל הרקע תכונה השולטת באופן שבו תמונת רקע ממלאת את הרכיב שאליו היא שייכת. ה בכושר האובייקט רכוש דומה למדי לזה, כפי שהוא קובע גם איך התמונה גדלה בתוך המיכל שלה.
ה מכילים ערך מכיל את התמונה בתוך המיכל שלה. כיסוי עושה את אותו הדבר, אבל אם יחס הממדים של התמונה ואת המיכל אינו תואם, את התמונה מקוצצת. למלא גורם לתמונה למתוח ולמלא מיכל שלה. בקנה מידה למטהבוחר את הגרסה הקטנה ביותר של התמונה להציג.
בדומה להשלמה מיקום הרקע רכוש של גודל הרקע, יש מיקום אובייקט רכוש בכושר האובייקט, מדי.
ה בכושר האובייקט נכס מזיז תמונה בתוך מיכל תמונה אל הקואורדינטות הנתונות. ניתן להגדיר את הקואורדינטות כ יחידות באורך מלא, יחידות אורך יחסי, מילות מפתח (חלק עליון, שמאלה, מרכז, בתחתית, ו ימין), או א צירוף תקף של אותם (20px ימין למעלה 5px, מרכז ימין 80px).
לפעמים אנחנו מוסיפים (אשר מוטבע מטבעו) ליד מחרוזות טקסט לקבלת מידע נוסף או קישוט. במקרה הזה, יישור הטקסט והתמונה לתוך המיקום הרצוי יכול להיות קצת טיפש מסובך, אם אתה לא יודע איזה רכוש להשתמש.
ה יישור אנכי רכוש הוא לא בלעדי לתאי השולחן לבד. זה יכול גם ליישר אלמנט בתוך שורה בתוך מוטבעת, ולכן ניתן להשתמש בו ליישר תמונה בשורה של טקסט. זה לוקח מספר לא מבוטל של ערכים שניתן להחיל על אלמנט מוטבע, אז יש לך אפשרויות רבות לבחירה.
PDF
5. צל תמונות עם מסנן: drop-shadow ()
כאשר נעשה שימוש בולט בטקסטים ותיבות, הצללים יכולים להוסיף חיים לדף אינטרנט. כך גם בתמונות. תמונות עם צורות הליבה ורקעים שקופים יכול להפיק תועלת צלליות מסנן CSS.
טיעוניה הם בדומה לערכים של מאפייני CSS הקשורים בצל (צל טקסט, צל קופסא). שני הראשונים מייצגים את מרחק אנכי ואופקי בין הצללים לבין התמונה, השלישי והרביעי הם טשטוש וה רדיוס מתפשט של הצל, והאחרון הוא צבע צל.
בדיוק כמו צל טקסט, צלליות גם יוצר צל זה יצוק לאובייקט השייך. לכן, כאשר הוא מוחל על תמונה, הצל לוקח את הצורה של החלק הגלוי של התמונה.
#container width: 300px; גובה: 300px; img רוחב: 100%; גובה: 100%; אובייקט בכושר: מכיל;
#container width: 300px; גובה: 300px; img רוחב: 100%; גובה: 100%; אובייקט בכושר: מכיל; 
