توصیه‌های آموزشی:

فنکشن hue-rotate() CSS

تعریف و استفاده hue-rotate() CSS

فیلترهای فنکشن رنگ را به عنصر اعمال می‌کنند.

مثال

مثال 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 Filter Effects Module Level 1

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

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

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

معلومات مرتبط

مشارکت:CSS فیلٹر کیمپٹی

مشارکت:CSS blur() فنکشن

مشارکت:CSS brightness() فنکشن

مشارکت:CSS contrast() فنکشن

مشارکت:CSS drop-shadow() فنکشن

مشارکت:CSS grayscale() فنکشن

مشارکت:CSS invert() فنکشن

مشارکت:CSS opacity() فنکشن

مشارکت:CSS saturate() فنکشن

مشارکت:CSS sepia() فنکشن