您现在的位置:首页 >> 前端 >> 内容

网站整体变灰色的css代码

时间:2017/2/25 12:02:24 点击:

  核心提示:之前做天津市滨海新区规国局官网时,客户提到这么个需求,就是在遇到突发事件时,例如遇难事件,网站能变成灰色以示对逝者的哀悼。比如汶川地震时、滨海新区大爆炸时...然后搜索了各个资料,经过修改css代码,...

之前做天津市滨海新区规国局官网时,客户提到这么个需求,就是在遇到突发事件时,例如遇难事件,网站能变成灰色以示对逝者的哀悼。比如汶川地震时、滨海新区大爆炸时...

然后搜索了各个资料,经过修改css代码,能够使用ie6+各种浏览器...

下面是分享代码:

<style type="text/css">

html,body {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-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: gray; 
}
</style>
/**支持IE6以上和Webkit浏览器(Chrome 18+, Safari 6.0+, and Opera 15+)**/

作者:网络 来源:信念堤岸