网站页面全局变黑白灰(支持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%)!important ;filter: 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; }
前一篇:debian安装java
后一篇:mysql常用命令

加载中…