滤镜
backdrop-filter: hue-rotate()
用于对元素背景应用色相旋转滤镜的工具类。
| 类名 | 样式 |
|---|---|
backdrop-hue-rotate-<number> | backdrop-filter: hue-rotate(<number>deg); |
-backdrop-hue-rotate-<number> | backdrop-filter: hue-rotate(calc(<number>deg * -1)); |
backdrop-hue-rotate-(<custom-property>) | backdrop-filter: hue-rotate(var(<custom-property>)); |
backdrop-hue-rotate-[<value>] | backdrop-filter: hue-rotate(<value>); |
示例
基础示例
使用诸如 backdrop-hue-rotate-90 和 backdrop-hue-rotate-180 这样的工具类来旋转元素背景的色相
backdrop-hue-rotate-90
backdrop-hue-rotate-180
backdrop-hue-rotate-270
<div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-hue-rotate-90 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-hue-rotate-180 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 backdrop-hue-rotate-270 ..."></div></div>使用负值
使用诸如 -backdrop-hue-rotate-90 和 -backdrop-hue-rotate-180 这样的工具类来设置负的背景色相旋转值
-backdrop-hue-rotate-15
-backdrop-hue-rotate-45
-backdrop-hue-rotate-90
<div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 -backdrop-hue-rotate-15 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 -backdrop-hue-rotate-45 ..."></div></div><div class="bg-[url(/img/mountains.jpg)]"> <div class="bg-white/30 -backdrop-hue-rotate-90 ..."></div></div>使用自定义值
使用 backdrop-hue-rotate-[<value>] 语法 来基于完全自定义的值设置背景色相旋转基于完全自定义的值
<div class="backdrop-hue-rotate-[3.142rad] ..."> <!-- ... --></div>对于 CSS 变量，你也可以使用 backdrop-hue-rotate-(<custom-property>) 语法
<div class="backdrop-hue-rotate-(--my-backdrop-hue-rotation) ..."> <!-- ... --></div>这只是一个简写形式，等同于 backdrop-hue-rotate-[var(<custom-property>)] 它会自动为你添加 var() 函数。
响应式设计
前缀使用断点变体（如 backdrop-filter: hue-rotate() 工具类 md:）为中等 及以上屏幕尺寸应用该工具类
<div class="backdrop-hue-rotate-15 md:backdrop-hue-rotate-0 ..."> <!-- ... --></div>在 变体文档 中了解更多关于使用变体的信息。