وظيفة CSS saturate()

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

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

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

مثال

مثال 1

تعيين مستويات تشبع مختلفة للصور:

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

تجربة شخصية

مثال 2

لتحديد تثبيت تشبع() مع 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

تثبيت تشبع(الكمية)

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

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الوظيفة لأول مرة.

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

مرجع:خصائص filter CSS

مرجع:وظيفة CSS blur()

مرجع:وظيفة CSS brightness()

مرجع:وظيفة CSS contrast()

مرجع:وظيفة CSS drop-shadow()

مرجع:وظيفة CSS grayscale()

مرجع:وظيفة CSS hue-rotate()

مرجع:وظيفة CSS invert()

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

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