滤镜
用于将背景亮度滤镜应用于元素的工具类。
类 | 样式 |
---|---|
backdrop-brightness-<number> | backdrop-filter: brightness(<number>%); |
backdrop-brightness-(<custom-property>) | backdrop-filter: brightness(var(<custom-property>)); |
backdrop-brightness-[<value>] | backdrop-filter: brightness(<value>); |
使用类似 backdrop-brightness-50
和 backdrop-brightness-100
的工具类来控制元素的背景亮度
使用 backdrop-brightness-[<value>]
语法 来设置背景亮度基于完全自定义的值
<div class="backdrop-brightness-[1.75] ..."> <!-- ... --></div>
对于 CSS 变量,您还可以使用 backdrop-brightness-(<custom-property>)
语法
<div class="backdrop-brightness-(--my-backdrop-brightness) ..."> <!-- ... --></div>
这只是 backdrop-brightness-[var(<custom-property>)]
的简写形式,会自动为您添加 var()
函数。
前缀给 backdrop-filter: brightness()
工具类 添加一个像 md:
这样的断点变体,以便仅在中等 屏幕尺寸及以上时应用该工具类
<div class="backdrop-brightness-110 md:backdrop-brightness-150 ..."> <!-- ... --></div>
在变体文档中了解有关使用变体的更多信息。