当前位置:首页 > 优惠 · 活动

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

发布时间:2020-04-04 09:21:00 点击:

如果只需要兼容主流浏览器可以使用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"));//指定元素还原

需要附件请联系佳速互联


优惠 · 活动 | 阿里云代理商 | 阿里云特价主机 | 圈子 | 关于我们 | 付款方式

阿里云购买咨询:13723486509(全国市话)

大客户经理:13723486509   深圳客户经理:0755-2688-1370

阿里云代理商 | 阿里云服务器价格 | 阿里云ECS购买流程 | 阿里云备案系统| 工信部备案信息查询 工信部官网

CopyRight © 2020 www.yunecs.cn All Rights Reserved 阿里云金牌代理— 深圳佳速互联科技有限公司  粤ICP备13085233号 技术支持:深圳网站建设  

展开

  • 售前咨询
  • 售前咨询
  • 售前咨询
  • 售前咨询
  • 技术支持
  • 技术支持
  • 技术支持
  • 备案专员
  • 备案专区
  • 渠道合作
  • 渠道合作
  • 扫一扫微信咨询:
  • 24小时热线:13723486509