- Filters
- hue-rotate
Filters
filter: hue-rotate()
用於對元素套用色相旋轉濾鏡的通用類別。
| Class | Styles |
|---|---|
hue-rotate-<number> | filter: hue-rotate(<number>deg); |
-hue-rotate-<number> | filter: hue-rotate(calc(<number>deg * -1)); |
hue-rotate-(<custom-property>) | filter: hue-rotate(var(<custom-property>)); |
hue-rotate-[<value>] | filter: hue-rotate(<value>); |
範例（Examples）
基本範例（Basic example）
使用 hue-rotate-90 和 hue-rotate-180 等通用類別來按度數旋轉元素的色相：
hue-rotate-15
hue-rotate-90
hue-rotate-180
hue-rotate-270
<img class="hue-rotate-15" src="/img/mountains.jpg" /><img class="hue-rotate-90" src="/img/mountains.jpg" /><img class="hue-rotate-180" src="/img/mountains.jpg" /><img class="hue-rotate-270" src="/img/mountains.jpg" />使用負值（Using negative values）
使用 -hue-rotate-15 和 -hue-rotate-45 等通用類別來設定負的色相旋轉值：
-hue-rotate-15
-hue-rotate-45
-hue-rotate-90
<img class="-hue-rotate-15" src="/img/mountains.jpg" /><img class="-hue-rotate-45" src="/img/mountains.jpg" /><img class="-hue-rotate-90" src="/img/mountains.jpg" />使用自訂值（Using a custom value）
使用 hue-rotate-[<value>] 語法，根據完全自訂的值來設定 hue rotation：
<img class="hue-rotate-[3.142rad] ..." src="/img/mountains.jpg" />對於 CSS 變數，你也可以使用 hue-rotate-(<custom-property>) 語法：
<img class="hue-rotate-(--my-hue-rotate) ..." src="/img/mountains.jpg" />這只是 hue-rotate-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。
響應式設計（Responsive design）
在 filter: hue-rotate() 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<img class="hue-rotate-60 md:hue-rotate-0 ..." src="/img/mountains.jpg" />在變體文件中了解更多關於使用變體的資訊。