خصائص filter لـ CSS

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

تعريف خصائص filter لتعريف تأثيرات الرؤية للعنصر (عادةً <img>) مثل الغموض والكثافة.

يرجى الرجوع أيضًا إلى:

دليل تعليمات CSS:صور CSS

دليل مرجع HTML DOM:خصائص filter

مثال

جعل جميع الصور بالأبيض والأسود (100% رمادي):

img {
  filter: grayscale(100%);
}

تجربة شخصية

نصيحة:يمكن العثور على أمثلة TIY المزيدية في أسفل الصفحة.

قواعد اللغة CSS

filter: لا شيء | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

نصيحة:لإضافة عدة فرزات، استخدم مسافات الفاصلة بين كل فرز (انظر الأمثلة الإضافية في أسفل الصفحة).

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

القيمة الافتراضية: none
الوراثة: لا
توليد الرسوم المتحركة: يدعم. راجع:مواصفات الرسوم المتحركة.
الإصدار: CSS3
جافا سكربت: object.style.filter="grayscale(100%)"

وظيفة الفرز

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

الفرز الوصف
none القيمة الافتراضية. تحديد عدم وجود تأثير.
blur(px)

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

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

تدريب بريق الصورة.

  • 0% سيجعل الصورة تُصبح سوداء تماماً.
  • القيمة الافتراضية هي 100%، تمثل الصورة الأصلية.
  • القيم التي تزيد عن 100% ستوفر نتائج أكثر إضاءة.
contrast(%)

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

  • 0% سيجعل الصورة تُصبح سوداء تماماً.
  • القيمة الافتراضية هي 100%، تمثل الصورة الأصلية.
  • القيم التي تزيد عن 100% ستوفر نتائج أكثر تناقضاً.
drop-shadow(h-shadow v-shadow blur spread color)

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

القيم الممكنة:

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

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

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

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

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

هذا المثال يخلق الظل الأحمر، في الاتجاهات العمودي والأفقية 8px، مع تأثير 10px من الحيود:

filter: drop-shadow(8px 8px 10px red);

نصيحة:هذا الفرز يشبه خاصية box-shadow.
grayscale(%)

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

  • 0% (0) هي القيمة الافتراضية، تمثل الصورة الأصلية.
  • 100% يجعل الصورة تصبح كاملة باللون الرمادي (للصور السوداء والبيضاء).

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

تطبيق دوران اللون في الصورة. يحدد هذا القيمة درجة الدائرة في حلقة اللون. القيمة الافتراضية هي 0deg، تمثل الصورة الأصلية.

ملاحظة:القيمة القصوى هي 360deg.
invert(%)

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

  • 0% (0) هي القيمة الافتراضية، تمثل الصورة الأصلية.
  • 100% يجعل الصورة تتحول إلى اللون الأبيض بالكامل.

ملاحظة:لا يسمح بالقيم السلبية.
opacity(%)

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

  • 0% هو شفافية كاملة.
  • 100% (1) هي القيمة الافتراضية وتمثل الصورة الأصلية (غير شفاف).

ملاحظة:لا يسمح بالقيم السلبية.

نصيحة:هذا الفرز يشبه خاصية opacity.
saturate(%)

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

  • 0% (0) يجعل الصورة غير مشبعة تمامًا.
  • 100% هي القيمة الافتراضية وتمثل الصورة الأصلية.
  • القيم التي تزيد عن 100% تقدم نتائج متجاوزة.

ملاحظة:لا يسمح بالقيم السلبية.
sepia(%)

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

  • 0% (0) هي القيمة الافتراضية، تمثل الصورة الأصلية.
  • 100% يجعل الصورة تصبح كاملة باللون البني.

ملاحظة:لا يسمح بالقيم السلبية.
url();

يستقبل وظيفة url() موقع ملف XML الخاص بالفرز SVG، ويمكن أن يحتوي على رابط إلى عنصر الفرز المحدد. مثال:

filter: url(svg-url#element-id);
initial ضبط هذه الخاصية إلى قيمتها الافتراضية. انظر initial.
inherit تنقل هذه الخاصية من عنصر الأب. انظر inherit.

المزيد من الأمثلة

مثال المظلمة

إضافة تأثير المظلمة إلى الصورة:

img {
  filter: blur(5px);
}

تجربة شخصية

مثال المظلمة 2

تطبيق صورة خلفية مظلمة:

img.background {
  filter: blur(35px);
}

تجربة شخصية

مثال الإضاءة

تدريب درجة الإضاءة في الصورة:

img {
  filter: brightness(200%);
}

تجربة شخصية

مثال التباين

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

img {
  filter: contrast(200%);
}

تجربة شخصية

مثال الظل

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

img {
  filter: drop-shadow(8px 8px 10px gray);
}

تجربة شخصية

مثال على درجات الرمادي

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

img {
  filter: grayscale(50%);
}

تجربة شخصية

مثال على دوران اللون

تطبيق دوران اللون في الصورة:

img {
  filter: hue-rotate(90deg);
}

تجربة شخصية

مثال على الاستبدال

استبدال العينات في الصورة:

img {
  filter: invert(100%);
}

تجربة شخصية

مثال على الشفافية

تحديد مستوى شفافية الصورة:

img {
  filter: opacity(30%);
}

تجربة شخصية

مثال على التشبع

تغيير درجة التشبع في الصورة:

img {
  filter: saturate(800%);
}

تجربة شخصية

مثال على البنيه

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

img {
  filter: sepia(100%);
}

تجربة شخصية

استخدام مرشحات متعددة

للبحث عن مرشحات متعددة، استخدم الفواصل الفاصلة بين كل مرشح. يرجى ملاحظة أن الترتيب مهم (على سبيل المثال، عند استخدام grayscale() بعد sepia() سيتم توليد صورة بيضاء بالكامل):

img {
  filter: contrast(200%) brightness(150%);
}

تجربة شخصية

جميع المرشحات

عرض جميع وظائف المرشحات:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

تجربة شخصية

دعم المتصفحات

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

الرقميات التي تأتي مع -webkit- تشير إلى الإصدار الأول الذي يستخدم البادئة.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

ملاحظة:إصدارات الإنترنت إكسبلورر القديمة نسبياً (من 4.0 إلى 8.0) تدعم الخاصية غير المعاييرية "filter" المكررة. عند الحاجة إلى دعم إصدارات إكسبلورر 8 وكلما كان أقل، يستخدم بشكل رئيسي لشفافية.