فنك CSS saturate()

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

CSS مطابق الساتر (saturate()) وظائف المرشح تستخدم لتعديل تشبع العنصر (قوة اللون).

  • 0% (أو 0) يجعل العنصر يفقد التشبع بالكامل
  • 100% (أو 1) لا يقدم أي تأثير
  • 200% (أو 2) يجعل العنصر مفرط التشبع

مثال

مثال 1

ضبط مستوى التشبع للصور المختلفة:

#img1 {
  filter: saturate(0);
}
#img2 {
  filter: saturate(100%);
}
#img3 {
  filter: saturate(200%);
}

تجربة شخصية

مثال 2

لتحديد مطابق الساتر (saturate()) مع backdrop-filter استخدام الخصائص معًا:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: saturate(450%);
  backdrop-filter: saturate(450%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

تجربة شخصية

نص CSS

مطابق الساتر (saturate(الكمية)
القيمة الوصف
الكمية

اختياري. تحديد قيمة التشبع، يمكن أن تكون عدد أو نسبة.

0% (أو 0) يجعل العنصر يفقد التشبع بالكامل.

100% (أو 1) يعني عدم وجود تأثير.

القيم التي تزيد عن 100% تقدم تأثيراً مفرطاً.

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

الإصدار: CSS Filter Effects Module Level 1

دعم المتصفح

الاعداد في الجدول تشير إلى إصدار المتصفح الذي يدعم هذه الوظيفة بشكل كامل.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

الصفحات ذات الصلة

المرجع:CSS filter ɗauɗi

المرجع:فنك CSS blur()

المرجع:فنك CSS brightness()

المرجع:فنك CSS contrast()

المرجع:فنك CSS drop-shadow()

المرجع:فنك CSS grayscale()

المرجع:فنك CSS hue-rotate()

المرجع:فنك CSS invert()

المرجع:CSS opacity() دالة

المرجع:CSS sepia() دالة