فونکسیون contrast() CSS

تعریف و استفاده

CSS contrast() فونکسیون‌های فیلتر برای تنظیم کنتراست عنصر استفاده می‌شوند.

• 0% باعث می‌شود که تصویر به طور کامل به رنگ خاکستری تبدیل شود
• 100% (یا 1) مقدار پیش‌فرض است، که نشان‌دهنده تصویر اصلی است
• مقدارهای بیشتر از 100% باعث افزایش کنتراست می‌شوند
• مقدارهای کمتر از 100% باعث کاهش کنتراست می‌شوند

مثال

مثال 1

افزودن و کاهش کنتراست تصاویر:

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

آزمایش کنید

مثال 2

را contrast() با backdrop-filter استفاده ترکیبی از ویژگی‌ها:

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

آزمایش کنید

نحوه‌ی نوشتن CSS

contrast(مقدار)

جزئیات فنی

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

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

صفحات مرتبط

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

منابع:فونکسیون blur() CSS

منابع:فونکسیون brightness() CSS

منابع:فونکسیون drop-shadow() CSS

منابع:فونکسیون grayscale() CSS

منابع:فونکسیون hue-rotate() CSS

منابع:فونکسیون invert() CSS

منابع:فونکسیون opacity() CSS

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

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