如何把一整个页面全部变为纯黑白显示（包括图片和文字）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36070288/article/details/79442029

最开始看到纯黑白页面，是从新闻上看到一位老演员逝世了，于是顺便查了下百度百科，一点开百科整个页面都是纯黑白的。我想这可能是为了表示对他的怀念悼念，百度故意而为之。身为前端程序员，出于好奇，查了下，知道有filter这么一个css属性

1、如果是单张图片或单段文字变黑白的话只需在对应元素的css样式中加如下代码即可：

img,div{
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

2、如果想让整个页面所有元素都变成黑白色，则：

//下面为百度百科页面css样式写法
html{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter ….3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\"/></filter></svg>#grayscale"); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    filter: gray;
    -webkit-filter: grayscale(1); 
}