هناك خصائص CSS ، مثل صور الخلفية ، وصور الحدود ، وخصائص القناع ، والتقطيع ، والتي يمكنك من خلالها إضافة الصور مباشرة إلى صفحات الويب والسيطرة على سلوكهم. ومع ذلك ، هناك أيضًا خصائص CSS المرتبطة بالصور أقل ذكرًا بشكل متكرر العمل على الصور المضافة مع علامة HTML, وهي الطريقة المفضلة لإضافة الصور إلى صفحات الويب.
يختلف الوصف الوظيفي لهذه الخصائص الأخيرة السيطرة على الظل الصورة إلى وضع الحدة, مساعدتنا بشكل أفضل في التحكم في مظهر وموضع الصور المضافة مع العلامة. دعونا نراهم واحدا تلو الآخر.
1. شحذ الصور مع صورة تقديم
عندما يتم رفع مستوى الصورة ، فإن المتصفح ينعم الصورة, لذلك لا تبدو منقطة. ولكن ، وفقًا لدقة الصورة والشاشة ، قد لا يكون هذا هو الأفضل في جميع الأوقات. يمكنك التحكم في سلوك المتصفح هذا باستخدام صورة تقديم خاصية.
هذه الملكية المدعومة جيدا يتحكم في الخوارزمية المستخدمة لقياس الصورة. قيمتين رئيسيتين هما حواف هش و منقطة.
ال حواف هش القيمة يحافظ على تباين الألوان بين البكسل. وبعبارة أخرى ، لا يتم التخفيف من الصور ، والتي عظيم للأعمال الفنية بكسل.
متى منقطة يستخدم ، قد بكسل القريبة من بكسل تناول مظهره, مما يجعلها تبدو وكأنها معا هم شكل بكسل واحد كبير, عظيم للشاشات عالية الدقة.
إذا واصلت النظر عن كثب في حواف الزهرة في GIF أدناه ، فيمكنك أن ترى الفرق بين منتظم و منقطة صورة.
img image-rendering: pixelated؛
2. امتداد الصور مع كائن صالح
ال يحتوي, التغطية, ملء القيم كلها مألوفة ، ونحن استخدامها ل خلفية الحجم خاصية تتحكم في كيفية تعبئة صورة خلفية للعنصر الذي تنتمي إليه. ال كائن صالح الخاصية تشبه إلى حد بعيد ، لأنه يحدد أيضا كيف أحجام الصورة داخل الحاوية.
ال يحتوي القيمة يحتوي على الصورة داخل الحاوية. التغطية يفعل نفس الشيء ، ولكن إذا كانت نسبة العرض إلى الارتفاع للصورة والحاوية غير متطابقة ، تم قص الصورة. ملء يسبب الصورة ل تمتد وملء الحاوية. خفضيختار أصغر نسخة من الصورة لعرضهم.
على غرار استكمال خلفية موقف ممتلكات خلفية الحجم, هناك وجوه الموقف الملكية ل كائن صالح, جدا.
ال كائن صالح خاصية تحريك الصورة داخل حاوية الصورة إلى الإحداثيات المقدمة. يمكن تعريف الإحداثيات وحدات الطول المطلق, وحدات الطول النسبي, الكلمات الدالة (أعلى, اليسار, مركز, الأسفل, و حق) ، أو مزيج صالح منهم (أعلى 20px الصحيح 5px, مركز اليمين 80px).
نضيف أحيانا (التي هي مضمنة بطبيعتها) بجانب سلاسل النص للحصول على معلومات أو زخرفة المضافة. في هذه الحالة, محاذاة النص والصورة في الموضع المطلوب يمكن أن تكون صعبة بعض الشيء ، إذا كنت لا تعرف أي خاصية للاستخدام.
ال محاذاة رأسية الملكية هي لا يقتصر على خلايا الجدول وحدها. يمكن أيضًا محاذاة عنصر مضمّن داخل مربع مضمن ، وبالتالي يمكن استخدامه محاذاة صورة في سطر النص. يستغرق الأمر عددًا لا بأس به من القيم التي يمكن تطبيقها على عنصر مضمن ، بحيث يكون لديك العديد من الخيارات للاختيار من بينها.
PDF
5. الصور الظل مع مرشح: إسقاط الظل ()
عند استخدامها بشكل غير واضح في النصوص والمربعات ، يمكن للظلال إضافة الحياة إلى صفحة ويب. وينطبق الشيء نفسه في الصور. الصور ذات الأشكال الأساسية والخلفيات الشفافة يمكن أن تستفيد من شبح الهبوط مرشح المغلق.
حججها هي تشبه قيم خصائص CSS المرتبطة بالظل (نص الظل, مربع الظل). الأولين يمثلان المسافة العمودية والأفقية بين الظل والصورة ، والثالث والرابع هم شىء ضبابي و ال انتشار دائرة نصف قطرها من الظل, وآخر واحد هو لون الظل.
تماما مثل نص الظل, شبح الهبوط كما يخلق الظل الذي هو مقولب للكائن الانتماء. لذلك ، عندما يتم تطبيقه على صورة ما ، يأخذ الظل شكل الجزء المرئي من الصورة.
#container width: 300px؛ الارتفاع: 300 بكسل ؛ img width: 100٪؛ الارتفاع: 100 ٪ ؛ كائن مناسبا: تحتوي ؛
#container width: 300px؛ الارتفاع: 300 بكسل ؛ img width: 100٪؛ الارتفاع: 100 ٪ ؛ كائن مناسبا: تحتوي ؛ 
