前端代码网页置灰和正确的避坑姿势

2023-10-11 22:55:27

前言

某些特殊的时期，会有前端置灰页面的需求，今天从前端的角度来聊聊网页置灰的实现方式和正确的避坑姿势。

现有主流网站的实现方式

B站、京东、掘金等基本上都是用的同一个方法，就是css3新增的一个属性filter。filter属性允许用户应用各种各样的滤镜效果到一个元素，包括模糊，颜色校正，灰度化等等。

/* 使用filter属性实现网页置灰 */
html {
  filter: grayscale(1);
}

这种方法实现起来非常简单，而且兼容性也很好，基本上所有现代浏览器都支持。

正确的避坑姿势

避免使用滤镜与透明度叠加

filter属性和opacity属性都是用来改变元素外观的，但是它们不能同时使用。如果同时使用，可能会导致元素出现意外的效果。

避免在所有元素上使用滤镜

filter属性可能会对页面的性能产生影响，因此不应该在所有元素上使用。只在需要的时候使用它，比如当你想让一个元素变灰时。

注意滤镜兼容性

filter属性在不同的浏览器中兼容性不同。在使用filter属性之前，应该检查浏览器的兼容性。

使用滤镜灰度化的优缺点

优点

实现简单
兼容性好
性能损耗小

缺点

无法设置灰度的百分比
无法实现局部灰度化

如何实现局部灰度化

如果需要实现局部灰度化，可以使用svg滤镜来实现。svg滤镜是一种基于svg的滤镜，它允许用户应用各种各样的滤镜效果到一个元素。

<!-- 使用svg滤镜实现局部灰度化 -->
<svg width="100%" height="100%">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0
                                        0.2126 0.7152 0.0722 0 0
                                        0.2126 0.7152 0.0722 0 0
                                        0      0      0   1 0" />
  </filter>
  <image filter="url(#grayscale)" xlink:href="image.png" width="100%" height="100%" />
</svg>