转载:
各大站通用首页变灰代码:依次排序:百度、淘宝(京东)、网易云音乐、360首页、腾...#掘金沸点#
/*****baidu******/
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
/*****淘宝*****/
-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
/****网易云音乐*****/
/*兼容ff*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'Matrix\'> values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
/*IE*/
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
other,谷歌
-webkit-filter: grayscale(1);
/***360***/
-webkit-filter: saturate(0);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
/****腾讯*****/
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
-webkit-filter: grayscale(1);
/*****掘金******/
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: #808080;
/*****CSDN******/
-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: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'Matrix\'> values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-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: gray;
/*****国务院新闻办公室*****/
div, p, h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,pre,form,fieldset,legend,button,input,textarea,table,th,td,img,b,i,em {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: gray;
}
转载:破丶晓风 链接:https://www.jianshu.com/p/f840d1331958
以上代码不支持IE11
IE11可使用JQ插件解决
先引入JQ
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
grayscale(document.getElementsByTagName("img"));
另两款JQ插件
https://gianlucaguarini.com/jQuery.BlackAndWhite/
https://work.karlhorky.com/gray/
- 图片半透明显示
filter: alpha(opacity=10);
-moz-opacity:.1;
opacity:0.1;
这行代码在IE和firefox下都半透明显示 。