1. 滤镜
  2. 色相旋转

滤镜

filter: hue-rotate()

用于对元素应用色相旋转滤镜的实用工具。

类名样式
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>);

示例

基本示例

使用类似 hue-rotate-90hue-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" />

使用负值

使用类似 -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" />

使用自定义值

使用 色相旋转-[<value>] 语法 来设置色相旋转基于完全自定义的值

<img class="hue-rotate-[3.142rad] ..." src="/img/mountains.jpg" />

对于 CSS 变量,你也可以使用 色相旋转-(<custom-property>) 语法

<img class="hue-rotate-(--my-hue-rotate) ..." src="/img/mountains.jpg" />

这只是一个简写形式,等同于 色相旋转-[var(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计

前缀一个 filter: hue-rotate() 实用工具 使用像 md: 这样的断点变体前缀,以便仅在中等 屏幕尺寸及以上情况下应用该实用工具

<img class="hue-rotate-60 md:hue-rotate-0 ..." src="/img/mountains.jpg" />

变体文档中了解更多关于使用变体的信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策