黑白网页 “灰度”效果的js插件 GRAYSCALE.JS

CSS中的filter

我们看看 MDN 关于 filter 的描述：

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. Included in the CSS standard are several functions that achieve predefined effects. You can also reference an SVG filter with a URL to an SVG filter element.

大意是可以使用 filter 给 HTML 元素添加一些效果，比如模糊、颜色偏移，通常可用于调整图像，背景和边框的渲染效果。CSS 标准里包含了一些预定义效果的函数，你也可以通过一个URL 使用 SVG 滤镜元素(SVG filter element)。

grayscale() 函数（修改图像灰度）
实现页面黑白主要用到 filter 中的 grayscale 预定义函数。grayscale 函数是 CSS 预定义的函数，主要作用是将图像转换为灰度图像，通过具体的值定义转换的比例。若值为 100% 则完全转为灰度图像，值为 0% 图像无变化。

    <style>
        html {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);    /*基于WebKit 内核的浏览器，谷歌, Safari, 新版Opera浏览器。。。*/
            -moz-filter: grayscale(100%);       /*火狐*/
            -ms-filter: grayscale(100%);        /*IE浏览器 和 Edge浏览器*/
            -o-filter: grayscale(100%);         /*旧版Opera浏览器*/
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        }
        body {
            filter: gray;   /* 兼容IE7、IE8、IE9 。且必须得加到body元素上，加到html元素上不起作用。选择器直接写body如果部分元素没有生效的话，可以写成body *{} */            
        }
    </style>
     
     
    <script src="./grayscale.js"></script>
    <script>
        // IE10-11用grayscale.js处理
        var navStr = navigator.userAgent.toLowerCase();
        if (navStr.indexOf("msie 10.0") !== -1 || navStr.indexOf("rv:11.0") !== -1) { // 判断是IE10或者IE11
            grayscale(document.body);
        }
    </script>

grayscale.js 下载地址

链接: https://pan.baidu.com/s/1rjpOBtjdYNT1TWTaLmDQZA 提取码: 2amh