一行代码实现网页变灰效果

4月4日，几乎所有的网站都变成了灰色，百度，B站，腾讯视频，爱奇艺视频

大家可以看到，所有的元素都变成了灰色，包括图片。起先我最想想到的是可能加了一个蒙版，但很快就放弃了这个愚蠢的想法，因为加了蒙版之后，元素都会变的不可点击。给所有的元素添加css样式不太可能，毕竟如果项目很大的话，这可是一个不小的工作量，那到底是如何实现的呢。

其实，只需要几行代码就搞定了。

filter: grayscale(100%);

给html加上上面的样式，即可实现，考虑兼容性

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

实现就是如此简单，filter样式，到底是做什么用的

MDN上是这样定义的

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

也就是说filter就是一个css滤镜，调整元素的模糊或者颜色偏移。

MDN的例子

filter: url("../../media/examples/shadow.svg#element-id");

filter: blur(5px);

filter: contrast(200%);

filter: grayscale(80%);

filter: hue-rotate(90deg);

filter: drop-shadow(16px 16px 20px red) invert(75%);

语法

filter: <filter-function> [<filter-function>]* | none

属性

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

 

---

参考链接： https://developer.mozilla.org/en-US/docs/Web/CSS/filter