خصائص النمط المرشح

التعريف والاستخدام

مرشح إضافة تأثيرات على الصورة (مثل البلة والكثافة).

انظر أيضًا:

دليل CSSخصائص المرشح

مثال

تغيير لون الصورة إلى أسود وأبيض (100% درجة رمادية):

document.getElementById("myImg").style.filter = "grayscale(100%)";

تجربة شخصية

النحو

استرداد خصائص المرشح:

عنصر.style.filter

ضبط خصائص المرشح:

عنصر.style.filter = "لا شيء | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

دالة المرشح

التعليق:يقبل المرشح باستخدام النسبة المئوية (مثل 75%) أيضًا القيم العشرية (أي 0.75).

مرشح الوصف
لا شيء يحدد عدم وجود تأثير.
blur(px)

تطبيق تأثير البلة على الصورة. القيم الكبيرة تؤدي إلى بلة أكثر.

إذا لم يحدد القيمة، سيتم استخدام 0.
brightness(%)

تدريج درجة السطوع للصورة.

0% يجعل الصورة سوداء تمامًا.

100% (1) هو القيمة الافتراضية، تمثل الصورة الأصلية.

القيم التي تزيد عن 100% تقدم نتائج أكثر إضاءة.
contrast(%)

تدريج درجة التباين للصورة.

0% يجعل الصورة سوداء تمامًا.

100% (1) هو القيمة الافتراضية، تمثل الصورة الأصلية.

القيم التي تزيد عن 100% تقدم نتائج بمستوى منخفض من التباين.
drop-shadow(h-shadow v-shadow blur spread color)

تطبيق تأثير الظل على الصورة.

القيم المحتملة:

h-shadow مطلوب. تحديد قيمة الظل الأفقية بالبكسل. القيمة السلبية تضع الظل على الجانب الأيسر للصورة.

v-shadow مطلوب. تحديد قيمة الظل العمودي بالبكسل. القيمة السلبية تضع الظل أعلى الصورة.

blur اختياري. الرقم الثالث، يجب أن يكون بالبكسل. إضافة تأثير ضبابية للظل. القيمة الأكبر تنتج ظلًا أكبر وأكثر إضاءة. لا يسمح بالقيم السلبية. إذا لم يحدد القيمة، سيتم استخدام 0 (سيكون حواف الظل حادة).

spread اختياري. الرقم الرابع، يجب أن يكون بالبكسل. القيمة الإيجابية تجعل الظل أكبر وأكبر، بينما القيمة السلبية تجعل الظل أصغر وأصغر. إذا لم يحدد، سيكون 0 (الظل سيكون نفس حجم العنصر).

التعليق:Chrome و Safari و Opera، وربما متصفحات أخرى، لا تدعم الطول الرابع؛ إذا تم إضافته، لن يتم عرضه.

colorاختياري. إضافة لون للظل. إذا لم يحدد، يعتمد اللون على المتصفح (عادةً الأسود).

نصيحة:يبدو هذا الفلتر مثل خاصية الظل.
grayscale(%)

تحويل الصورة إلى درجة الرمادي.

0% (0) هو القيمة الافتراضية، تمثل الصورة الأصلية.

100% يجعل الصورة تتحول إلى اللون الرمادي تمامًا (للصور السوداء والبيضاء).

التعليق:لا يُسمح بالقيم السلبية.
hue-rotate(deg)

تطبيق دوران الألوان على الصورة. القيمة تعرف درجة دوران العينات حول حلقة الألوان.

0deg هو القيمة الافتراضية، تمثل الصورة الأصلية.

التعليق:أقصى قيمة هي 360 درجة.
invert(%)

مقلب العينات في الصورة.

0% (0) هو القيمة الافتراضية، تمثل الصورة الأصلية.

100% يجعل الصورة مقلوبة تمامًا.

التعليق:لا يُسمح بالقيم السلبية.
opacity(%)

ضبط مستوى الشفافية للصورة. مستوى الشفافية يصف مستوى الشفافية، حيث:

0% شفاف تمامًا.

100% (1) هو القيمة الافتراضية، تمثل الصورة الأصلية (بدون شفافية).

التعليق:لا يُسمح بالقيم السلبية.

نصيحة:يبدو هذا الفلتر مثل خاصية الشفافية.
saturate(%)

تدريج درجة التشبع للصورة.

0% (0) يجعل الصورة غير مشبعة تمامًا.

100% هو القيمة الافتراضية، تمثل الصورة الأصلية.

القيم التي تزيد عن 100% تقدم نتائج متبالغ فيها.

التعليق:لا يُسمح بالقيم السلبية.
sepia(%)

تحويل الصورة إلى اللون البني البني.

0% (0) هو القيمة الافتراضية، تمثل الصورة الأصلية.

100% يجعل الصورة تظهر باللون البني البني.

التعليق:لا يُسمح بالقيم السلبية.

تفاصيل التقنية

إصدار CSS: CSS3

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الذي يدعم هذا الخصائص بشكل كامل.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0