توابع grayscale() CSS

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

CSS grayscale() توابع فیلتر تصویر را به رنگ خاکستری تبدیل می‌کند.

  • 100٪ (یا 1) باعث می‌شود که تصویر به طور کامل به رنگ خاکستری تبدیل شود
  • 0٪ (یا 0) باعث می‌شود که هیچ اثری ایجاد نشود

مثال

مثال 1

تنظیم مقادیر مختلف خاکستری برای تصاویر:

#img1 {
  filter: grayscale(1);
}
#img2 {
  filter: grayscale(60%);
}
#img3 {
  filter: grayscale(0.4);
}

آزمایش کنید

مثال 2

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

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

آزمایش کنید

نحوه نوشتن CSS

grayscale(مقدار)
مقدار توضیح
مقدار

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

100٪ (یا 1) باعث می‌شود که عنصر به طور کامل به رنگ خاکستری تبدیل شود.

0٪ (یا 0) نشان‌دهنده تصویر اصلی (بدون اثر) است.

مقدار پیش‌فرض 1 است.

جزئیات فنی

نسخه: محدودیت‌های اثرات فیلتر CSS سطح 1

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

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

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

صفحات مرتبط

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

منابع:توابع تارگی CSS

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

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

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

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

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

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

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

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