توابع 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(مقدار)
مقدار توضیح
مقدار

اختیاری. مقدار روشنایی را مشخص کنید، که می‌تواند عدد یا درصد باشد.

0% باعث می‌شود عناصر کاملاً سیاه شوند. 100% (یا 1) مقدار پیش‌فرض است که نشان‌دهنده تصویر اصلی (بدون اثر) است.

ارزش‌های بیش از 100% باعث روشن‌تر شدن تصویر می‌شود.

جزئیات فنی

نسخه: مодуل اثرات فیلتر CSS سطح 1

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

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

کروم کناره افراد سفاری اپرا
18 12 35 6 15

صفحات مرتبط

منابع:ویژگی filter CSS

منابع:توابع blur() CSS

منابع:توابع کنتراست CSS

منابع:توابع سایه افتادن CSS

منابع:توابع سیاه و سفید CSS

منابع:توابع چرخش رنگ CSS

منابع:توابع معکوس CSS

منابع:توابع شفافیت CSS

منابع:توابع saturate() CSS

منابع:توابع sepia() CSS