CSS grayscale() 函数

定义和用法

CSS 的 grayscale() 滤镜函数将图像转换为灰度。

• 100%（或 1）会使图像完全变为灰度
• 0%（或 0）将无效果

实例

例子 1

为图像设置不同的灰度值：

#img1 {
  filter: grayscale(1);
}
#img2 {
  filter: grayscale(60%);
}
#img3 {
  filter: grayscale(0.4);
}

亲自试一试

例子 2

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

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

亲自试一试

CSS 语法

grayscale(amount)

နည်းပါး အချက်အလက်

ကုမ္ပဏီ အကူအညီ

စာမျက်နှာတွင် အရာဝတ္တု ကို ပထမဆုံး ပေါ်ပေါက်သော ကုမ္ပဏီ ကန့်သတ်ထားသည်。

လုပ်ခြင်းပေးသော စာမျက်နှာ

参考：စီစ်အုပ်စုရှိ အခြေခံ filter အကျဉ်း

参考：CSS သို့မဟုတ်() ကုမ္ပဏီ

参考：CSS ပြောင်းလဲသောအရောင်() ကုမ္ပဏီ

参考：CSS ပြည့်အောင်() ကုမ္ပဏီ

参考：CSS ပြန်ချိုးသောအရောင်သုံး() ကုမ္ပဏီ

参考：CSS လောက်လျော့() ကုမ္ပဏီ

参考：CSS အပြန်ပြောင်() ကုမ္ပဏီ

参考：CSS ကိုယ်စားပြုသော() ကုမ္ပဏီ

参考：CSS saturate() 函数

参考：CSS sepia() 函数