توابع hue-rotate() در CSS

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

CSS hue-rotate() توابع فیلتر به عناصر رنگ‌های چرخان را اعمال می‌کنند.

مثال

مثال 1

تنظیم رنگ‌های مختلف برای تصاویر:

#img1 {
  filter: hue-rotate(200deg);
}
#img2 {
  filter: hue-rotate(90deg);
}
#img3 {
  filter: hue-rotate(-90deg);
}

آزمایش کنید

مثال 2

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

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: hue-rotate(90deg);
  backdrop-filter: hue-rotate(90deg);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

آزمایش کنید

نوع دستور زبان CSS

hue-rotate(زاویه)
مقدار توضیح
زاویه

اختیاری. یک زاویه مشخص می‌کند که تغییر رنگ نمونه‌های ورودی نسبتاً تغییر می‌کند.

مقدار مثبت مقدار رنگ‌ها را افزایش می‌دهد و مقدار منفی مقدار رنگ‌ها را کاهش می‌دهد.

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

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

جزئیات فنی

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

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

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

Chrome Edge Firefox Safari Opera
18 12 35 6 15

صفحات مرتبط

منابع:خصوصیت filter CSS

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

منابع:توابع brightness() در CSS

منابع:توابع contrast() در CSS

منابع:توابع drop-shadow() در CSS

منابع:توابع grayscale() در CSS

منابع:توابع invert() در CSS

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

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

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