1. 滤镜
  2. 亮度

滤镜

filter: brightness()

用于对元素应用亮度滤镜的工具类。

类名样式
brightness-<number>
filter: brightness(<number>%);
brightness-(<custom-property>)
filter: brightness(var(<custom-property>));
brightness-[<value>]
filter: brightness(<value>);

示例

基本示例

使用 brightness-50brightness-100 等工具类来控制元素的亮度

brightness-50

brightness-100

brightness-125

brightness-200

<img class="brightness-50 ..." src="/img/mountains.jpg" />
<img class="brightness-100 ..." src="/img/mountains.jpg" />
<img class="brightness-125 ..." src="/img/mountains.jpg" />
<img class="brightness-200 ..." src="/img/mountains.jpg" />

使用自定义值

使用 亮度-[<value>] 语法 来设置亮度基于完全自定义的值

<img class="brightness-[1.75] ..." src="/img/mountains.jpg" />

对于 CSS 变量,您还可以使用 亮度-(<custom-property>) 语法

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

这只是 亮度-[var(<custom-property>)] 的简写形式,它会自动为您添加 var() 函数。

响应式设计

前缀a filter: brightness() 工具类 与断点变体(如 md:)一起使用,以仅在中等 屏幕尺寸及以上尺寸应用该工具类

<img class="brightness-110 md:brightness-150 ..." src="/img/mountains.jpg" />

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

Copyright © 2025 Tailwind Labs Inc.·商标政策