CSS brightness() فنکشن

تعریف و نحوه‌ی استفاده

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(مقدار)

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه‌ی اولین مرورگر هستند که این فنکشن را کامل پشتیبانی می‌کند.

صفحات مرتبط

مراجع:CSS فیلٹر پراپریٹی

مراجع:CSS blur() کا فنکشن

مراجع:CSS contrast() فنکشن

مراجع:CSS drop-shadow() فنکشن

مراجع:CSS grayscale() فنکشن

مراجع:CSS hue-rotate() فنکشن

مراجع:CSS invert() فنکشن

مراجع:CSS opacity() فنکشن

مراجع:CSS saturate() کا فنکشن

مراجع:CSS sepia() کا فنکشن