JS+CSS网站整站变黑白效果（兼容IE和主流浏览器）
发布时间：2020-04-08 19:03:50
作者：筱航科技
来源：本站
浏览量（390）
点赞（194）
摘要：如果只需要兼容主流浏览器可以使用css的 filter 属性（Chrome内核） 将代码放入前端即可让对应网页变黑灰色！filter 是滤镜的意思，filter:gray 的意思就是说给页面加上一个灰度的滤镜，所以 html 里面的所有内容都会变成黑白的了。这段代码可以实现Chrome内核浏览器的显示效果<styletype="text/c
如果只需要兼容主流浏览器可以使用css的 filter 属性（Chrome内核）
将代码放入前端即可让对应网页变黑灰色！filter 是滤镜的意思，filter:gray 的意思就是说给页面加上一个灰度的滤镜，所以 html 里面的所有内容都会变成黑白的了。
这段代码可以实现Chrome内核浏览器的显示效果
<style type="text/css">
html {
-webkit-filter: grayscale(100%);
}
</style>这个滤镜普通写法对于 chrome 和 safari 浏览器是无效的，所以可以使用下面的兼容性写法，达到兼容更多浏览器的作用。
以下适用于主流浏览器（除IE外），放置在网站公共头部或者底部文件里
<style>
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}
</style>如果需要对IE浏览器进行兼容
还需要使用到一个JS，两者搭配可以达到较好的兼容性
引入到页面中并指定变黑白的部分即可，如果指定全部，使用body就可以了
grayscale(document.body); //整站变成灰色
grayscale(document.getElementById("main"));//指定元素变灰色
grayscale.reset(document.getElementById("main"));//指定元素还原筱航科技主营业务： 长春网站建设 - 长春网站制作 -长春网站设计 -长春网站开发 -长春网站优化 -长春网站SEO - 长春网站推广 - 长春网络营销 - 长春网站关键词排名 -长春微信小程序 -长春微信商城 -长春分销商城
扫一扫，关注我们
声明：本文由【筱航科技】编辑上传发布，转载此文章须经作者同意，并请附上出处【筱航科技】及本页链接。如内容、图片有任何版权问题，请联系我们进行处理。
194
