黑白滤镜

浮华与是非 3/31/2025 HTML,CSS

# 黑白滤镜

有时候我们需要将一个图片或者网页改变为黑白色，这个时候我们就需要用到滤镜。在现代浏览器中我们可以使用css3的filter属性来实现：

 .gray{
   filter: grayscale(1);
 }

1
2
3

兼容性不太好，下面是兼容性更好的写法：

.grayscale {
  /* svg 这种兼容性最好*/
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  
  /* IE6-9 */
  filter: gray;
  
  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
  
  /* 标准语法 */
  filter: grayscale(100%);
  
  /* 禁用IE专有滤镜 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
  
  /* 兼容旧版Firefox */
  filter: grayscale(1);
}

/* 如果需要取消灰度效果 */
.grayscale-off {
  filter: none;
  -webkit-filter: grayscale(0%);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

注意事项

性能考虑：CSS滤镜在某些浏览器中可能影响性能，特别是在动画元素上使用时
IE兼容性：IE10+支持标准filter语法，IE6-9需要专有语法
移动设备：大多数现代移动浏览器都支持CSS filter属性
SVG滤镜：提供了最好的跨浏览器兼容性，但语法较为复杂