CSS brightness() 函数

定义和用法

CSS 的 brightness() 滤镜函数用于调整元素的亮度。

  • 0% 会使图像完全变黑
  • 100%(或 1)是默认值,表示原始图像
  • 超过 100% 的值会使图像更亮
  • 低于 100% 的值会使图像变暗

实例

例子 1

使图像比原始图像更亮或更暗:

#img1 {
  filter: brightness(150%);
}
#img2 {
  filter: brightness(50%);
}

亲自试一试

例子 2

brightness()backdrop-filter 属性结合使用:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: brightness(150%);
  backdrop-filter: brightness(150%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

亲自试一试

CSS 语法

brightness(amount)
描述
amount

可选。指定亮度值,可以是数字或百分比。

0% 会使元素完全变黑。100%(或 1)是默认值,表示原始图像(无效果)。

Maneno ya juu ya 100% inasababisha picha iwe na ngumu zaidi.

Vituo vya uharibifu

Toleo: CSS Filter Effects Module Level 1

Matumizi ya kifungu cha kifungu cha kifaa cha kichwa cha kwanza cha kufaa kufungua fungu hii

Maneno ya jumla katika tabia ni kichwa cha kwanza cha kufaa kufungua fungu hii.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Makao ya muhimu

Tazama:Hisia la CSS filter

Tazama:Funksheni ya blur() katika CSS

Tazama:Faa CSS contrast() fungu

Tazama:Faa CSS drop-shadow() fungu

Tazama:Faa CSS grayscale() fungu

Tazama:Faa CSS hue-rotate() fungu

Tazama:Faa CSS invert() fungu

Tazama:Faa CSS opacity() fungu

Tazama:Funksheni ya saturate() katika CSS

Tazama:Funksheni ya sepia() katika CSS