加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

网站页面全局变黑白灰(支持IE10,11及chorme,Opera,Firefox主流浏览器)

(2020-04-04 01:13:33)
分类: CSS

4月4日全国性哀悼各大网站首页都设置为灰色,这里整理一下设置的方法。

使用css支持chrome、Opera、Firefox浏览器,对于IE10、11采用JS脚本处理,需要使用JQuery,需要在网站全局变黑白需要在网站的全局模板页中实现下面的样式和代码

 

CSS样式部分:

 



body,div,span,p,img{

-webkit-filter: grayscale(100%); 

-moz-filter: grayscale(100%) !important; 


-ms-filter: grayscale(100%);
-o-filter: grayscale(100%)!importantfilter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter:gray; }


JQuery脚本代码:


var exports = {
    grayscale: function(image) {
        var self = this;

        // 检测是否支持标准滤镜
        var isUnsupport = (function() {

            if (document.msHidden != 'undefined') {
                var div = document_createElement_x_x_x_x_x('div'), value = 'grayscale(100%)';
                div.style.filter = value;

                return window.getComputedStyle(div).filter !== value;
            }
        })();

if (image && isUnsupport == true) {
            if (image.length > 0) {
                if (image.each) {
                    image.each(function() {
                        self.grayscale(this);
                    });
                } else if (image.forEach) {
                    image.forEach(function(img) {
                        self.grayscale(img);
                    });
                }
            } else if (/img/i.test(image.tagName)) {
                // 载入SVG滤镜
                if (!document.grayscale) {
                    document.body.insertAdjacentHTML('afterBegin', '\
                \
                    \
                \
            ');
                    document.grayscale = true;
                }

                // 图片变SVG
                var cl = image.className, src = image.src;
                // 尺寸
                var width = image.clientWidth, height = image.clientHeight;

                if (!image.grayscale) {
                    image.insertAdjacentHTML('beforeBegin', ' src 

+'" x="0" y="0" width="'+ width +'" height="'+ height +'" filter="url(\'#grayscale\')">');
                }
            } 

            return this;
        }

}

}
grayscale();


以上为各个整理的方法,经过测试。以下是从各大平台网站中整理出来的代码,未测试过。

纯属css支持IE11(未测试,从搜狐截取,腾讯采用的是js脚本形式)


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,;#grayscale);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

* {
    filter: gray;
}

0

阅读 收藏 喜欢 打印举报/Report
前一篇:debian安装java
后一篇:mysql常用命令
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有