وظيفة brightness() CSS

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

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

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

مثال

مثال 1

جعل الصورة أكثر إضاءة أو أغمقًا من الصورة الأصلية:

#img1 {
  filter: brightness(150%);
}
#img2 {
  filter: brightness(50%);
}

تجربة شخصية

مثال 2

لتحديد brightness() مع backdrop-filter استخدام الخصائص معًا:

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

تجربة شخصية

النصائح النهائية CSS

brightness(amount)

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

دعم المتصفح

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

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

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

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

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

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

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

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

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

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

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

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