فيما يلي نتائج هذا المقال:
لنبدأ!
تغيير لون الصورة في CSS
لتغيير لون الصورة في CSS ، تعرف أولاً على خاصية المرشح ووظائفها. بهذه الطريقة ستكتسب فهمًا أفضل.
تصفية خاصية CSS
للتحكم في التأثير المرئي لخاصية مرشح الصورة في CSS يتم استخدامها. التأثيرات المرئية هي:
- طمس
- سطوع
- تعديل اللون
- شبح الهبوط
- العتامة
بناء جملة خاصية التصفية
صيغة خاصية التصفية هي:
منقي : طمس ( ) | شبح الهبوط ( ) | العتامة ( )- طمس (): تستخدم لتطبيق تأثير التمويه على الصورة.
- شبح الهبوط(): خلق ظل على الصورة.
- عتامة (): تستخدم لإضافة الشفافية للصورة.
يمكننا استخدام مرشحات متعددة باستخدام خاصية التصفية هذه. تتناول هذه المقالة كيفية تغيير لون الصورة ، لذا سنشرح هنا كيفية استخدام وظيفتي الظل المسقط () والعتامة () معها.
شبح الهبوط()
الظل المسقط () هو وظيفة مضمنة في CSS تسمح بتعيين الظل لأي عنصر أو صورة. تُستخدم المعلمات التالية في وظيفة drop-shadow () لتغيير لون الصورة:
- تعويض x: يتم استخدامه لإضافة الظل الأفقي.
- تعويض ص: يتم إضافة الظلال عموديًا باستخدام هذا.
- اللون: الظلال ملونة بهذه المعلمة.
لتوضيح هذه النقاط ، دعنا ننتقل إلى بنية الظل المسقط:
شبح الهبوط ( لون تعويض x تعويض ص )- يمكن أن تكون offset-x و offset-y موجبة أو سالبة.
- في الوضع الأفقي ، تُستخدم القيمة الموجبة لإضافة التأثيرات على الجانب الأيمن ، والسالب للجانب الأيسر.
- في الاتجاه العمودي ، القيمة الموجبة للجانب السفلي ، والسالب للأعلى.
- بدلاً من اللون ، يمكنك تعيين أي لون تريد أن تعطيه للصورة.
عتامة ()
العتامة () تستخدم لإضافة الشفافية إلى عنصر أو أي صورة. صيغة العتامة () هي:
العتامة ( رقم ) ؛هنا ' رقم ' أنا 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 () مع خاصية التصفية. العتامة () تحدد شفافية الصورة والظل المسقط () يعين اللون والظل للصورة. أوضح هذا المقال طريقة تغيير لون الصورة باستخدام CSS.