CSS saturate() 函数

定义和用法

CSS 的 saturate() 滤镜函数用于调整元素的饱和度（颜色强度）。

  • 0%（或 0）会使元素完全去饱和
  • 100%（或 1）将无效果
  • 200%（或 2）会使元素超饱和

实例

例子 1

为图像设置不同的饱和度：

#img1 {
  filter: saturate(0);
}
#img2 {
  filter: saturate(100%);
}
#img3 {
  filter: saturate(200%);
}

亲自试一试

例子 2

将 saturate() 与 backdrop-filter 属性结合使用：

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

亲自试一试

CSS 语法

saturate(amount)
值 描述
amount

可选。指定饱和度值，可以是数字或百分比。

0%（或 0）会使元素完全去饱和。

100% (au 1) inaonyesha matokeo ya bila kina.

Matokeo ya thamani inayotoka kwa thamani za kikilimo cha kina zaidi ya 100% zinafanikiwa inayoweza kufaaidia kwa matokeo ya kikilimo cha kina cha kina.

Vivyo vya Teknolojia

Versioni: Moduli ya Funksiyoni ya Kifiltre cha CSS Mwongozo wa Kwanza

Inafuatilia ya kusimamia

Inafuatilia ya tabia za kusimamia inaangalia mengine kama kiwango cha kwanza cha kusimamia kwa programu ya kusoma tovuti inayosimamia hii funksiyoni.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Makampuni ya mawasiliano

Matokeo:Hisia CSS filter

Matokeo:Funkili ya CSS blur()

Matokeo:Funkili ya CSS brightness()

Matokeo:Funkili ya CSS contrast()

Matokeo:Funkili ya CSS drop-shadow()

Matokeo:Funkili ya CSS grayscale()

Matokeo:Funkili ya CSS hue-rotate()

Matokeo:Funkili ya CSS invert()

Matokeo:Fani cha opacity() cha CSS

Matokeo:Fani cha sepia() cha CSS