hue-rotate()

**hue-rotate()** CSS 函数 旋转元素及其内容的色相。其结果为一个<filter-function>。

注意：hue-rotate()被指定为对 RGB 颜色进行矩阵运算。它实际上并没有将颜色转换为 HSL 模型，后者是一个非线性运算。因此，它可能无法保留原始颜色的饱和度或亮度，特别是对于饱和颜色。

试一试

语法

hue-rotate() 函数将颜色旋转应用于其所应用的元素。

css
hue-rotate(angle)

值

angle

输入样本的色相相对变化，以<angle>指定。值为 0deg 保持输入不变。正色相旋转会增加色相值，而负色相旋转会减少色相值。插值的初始值为 0。没有最小值或最大值。大于 360deg 的值的效果是，给定 hue-rotate(Ndeg)，计算结果为 N 模 360。

<angle> CSS 数据类型表示以度、梯度、弧度或转表示的角度值。以下等效

css
hue-rotate(-180deg)
hue-rotate(540deg)
hue-rotate(200grad)
hue-rotate(3.14159rad)
hue-rotate(0.5turn)

正式语法

<hue-rotate()> = 
  hue-rotate( [ <angle> | <zero> ]? )

示例

使用 backdrop-filter 属性

此示例通过 backdrop-filter CSS 属性将 hue-rotate() 过滤器应用于段落，将颜色偏移到 <p> 后面的区域。

css
.container {
  background: url(image.jpg) no-repeat left / contain #011296;
}
p {
  backdrop-filter: hue-rotate(240deg);
  text-shadow: 2px 2px #011296;
}

使用 filter 属性

此示例通过 filter CSS 属性应用 hue-rotate() 过滤器，将颜色偏移添加到整个元素，包括内容、边框和背景图像。

css
p {
  filter: hue-rotate(-60deg);
  text-shadow: 2px 2px blue;
  background-color: magenta;
  color: goldenrod;
  border: 1em solid rebeccapurple;
  box-shadow:
    inset -5px -5px red,
    5px 5px yellow;
}

使用 url() 和 SVG hue-rotate 过滤器

SVG <filter> 元素用于定义自定义滤镜效果，然后可以通过id 引用。<filter> 的 <feColorMatrix> 原语 hueRotate 类型提供了相同的效果。给定以下

svg
<filter id="filterID">
  <feColorMatrix type="hueRotate" values="90" />
</filter>

这些值产生相同的结果

css
filter: hue-rotate(90deg); /* 90deg rotation */
filter: url(#filterID); /* with embedded SVG */
filter: url(folder/fileName.svg#filterID); /* external svg filter definition */

此示例显示三个图像：应用了 hue-rotate() 过滤器函数的图像、应用了等效 url() 过滤器的图像以及用于比较的原始图像

hue-rotate() 不保留饱和度或亮度

下图比较了两个从红色开始的颜色渐变：第一个是使用 hue-rotate() 生成的，第二个是使用实际的 HSL 颜色值生成的。请注意，hue-rotate() 渐变在中间显示出明显的饱和度和亮度差异。

html
<div>
  <p>Using <code>hue-rotate()</code></p>
  <div id="hue-rotate"></div>
</div>
<div>
  <p>Using <code>hsl()</code></p>
  <div id="hsl"></div>
</div>
js
const hueRotate = document.getElementById("hue-rotate");
const hsl = document.getElementById("hsl");

for (let i = 0; i < 360; i++) {
  const div1 = document.createElement("div");
  div1.style.backgroundColor = `hsl(${i}, 100%, 50%)`;
  hsl.appendChild(div1);

  const div2 = document.createElement("div");
  div2.style.backgroundColor = "red";
  div2.style.filter = `hue-rotate(${i}deg)`;
  hueRotate.appendChild(div2);
}

规范

规范
滤镜效果模块级别 1
# funcdef-filter-hue-rotate

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅