阿里云金牌合作伙伴,网站建设第一品牌,互联网整合专家
佳速观点

当前位置:首页 >> 新闻动态 >> JS+CSS网站整站变黑白效果(兼容IE和主流浏览器)

JS+CSS网站整站变黑白效果(兼容IE和主流浏览器)

编辑:龙华网站建设   来源:佳速互联   浏览量:正在读取   时间:2020-04-04

如果只需要兼容主流浏览器可以使用css的 filter 属性(Chrome内核)

将代码放入前端即可让对应网页变黑灰色!filter 是滤镜的意思,filter:gray 的意思就是说给页面加上一个灰度的滤镜,所以 html 里面的所有内容都会变成黑白的了。

这段代码可以实现Chrome内核浏览器的显示效果


这个滤镜普通写法对于 chrome 和 safari 浏览器是无效的,所以可以使用下面的兼容性写法,达到兼容更多浏览器的作用。

以下适用于主流浏览器(除IE外),放置在网站公共头部或者底部文件里

如果需要对IE浏览器进行兼容

还需要使用到一个JS,两者搭配可以达到较好的兼容性

引入到页面中并指定变黑白的部分即可,如果指定全部,使用body就可以了

grayscale(document.body); //整站变成灰色
grayscale(document.getElementById("main"));//指定元素变灰色
grayscale.reset(document.getElementById("main"));//指定元素还原

需要附件请联系佳速互联



友情链接: 永兴盛 旗文电子 哈咪实业 迈昂科技 源禹环保 喷涂机器人 阿里云金牌合作伙伴 深圳阿里云服务器 长沙网站建设 深圳百度爱采购推广 深圳万网空间 深圳做网站 响应式网站建设 宝安做网站 深圳设计网站 阿里云ICP备案 宝安网站建设 南山网站建设 深圳营销型网站建设 深圳品牌网站建设 深圳微信网站建设 西乡网站建设 免备案云主机 外贸网站建设
13723486509