在需要的页面上加上以上样式
filter:grayscale(1);
-webkit-filter:grayscale(1)
但如果你的网页内有「绝对和固定定位」元素,最好要把 filter 样式加到 <html>
上。
使用的是filter的功能
1.模糊 blur 值为length filter: blur(9px);
2.灰度 grayscale 值为0-1之间的小数 filter: grayscale(1);
3.亮度 brightness 值为0-1之间的小数 filter: brightness(1);
4.对比度 contrast 值为num filter: contrast(2);
5.饱和度 saturate 值为num filter: saturate(3);
6.色相旋转 hue-rotate 值为angle filter: hue-rotate(180deg);
7.反色 invert 值为0-1之间的小数 filter: invert(1);
8.阴影 drop-shadow filter: drop-shadow(0px 0px 2px #000);
9.透明度 opacity 值为0-1之间的小数 filter: opacity(0.5);
10.褐色 sepia 值为0-1之间的小数 filter: sepia(0.5);
CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。-webkit-filter是css3的一个属性