فنکشن grayscale() CSS

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

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

• 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(amount)

جزئیات فنی

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

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

صفحات مرتبط

مطالبت:CSS فیل اپریشن

مطالبت:CSS blur() فنکشن

مطالبت:CSS brightness() فنکشن

مطالبت:CSS contrast() فنکشن

مطالبت:CSS drop-shadow() فنکشن

مطالبت:CSS hue-rotate() فنکشن

مطالبت:CSS invert() فنکشن

مطالبت:CSS opacity() فنکشن

مطالبت:CSS saturate() کا فانکشن

مطالبت:CSS sepia() کا فانکشن