开发者社区> 小周sir> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

使用CSS实现网页变灰效果

简介: 使用css实现网页变灰效果
+关注继续查看
福利推荐:阿里云、腾讯云、华为云等大品牌云产品全线2折优惠活动来袭,4核8G云服务器899元/3年,新老用户共享优惠,点击这里立即抢购>>>

  • 当有某些需求的时候,需要网页变成灰色,这个时候,就可以使用CSS提供的属性解决这个问题,
  • 直接给html写样式
html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
  • 通过定义时间,在某一个时刻触发网页变灰效果
window.onload = function () {
    var date = new Date()
    var time = date.getTime(); //当前时间戳
    var style = document.createElement("style");
    style.type = "text/css";
    try {
        style.appendChild(document.createTextNode("*{filter: grayscale(100%);-webkit-filter: grayscale(100%)}"));
    } catch (ex) {
        style.styleSheet.cssText = "*{filter: grayscale(100%);-webkit-filter: grayscale(100%)}"; //针对IE
    }
    var stringTime = "2022-12-01 00:00:00"; //指定时间戳
    var timestamp = Date.parse(new Date(stringTime));
    if (time > timestamp) {
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(style);
    }
}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【笔记】纯css实现列表水平滑动(图片或文字内容不限)
纯css实现列表水平滑动(图片或文字内容不限)
0 0
面试官:请使用 CSS 实现自适应正方形
面试官:请使用 CSS 实现自适应正方形
0 0
我已经说了5种css居中实现的方式了,面试官竟然说还不够?
这是一篇关于居中对齐方式的总结 开篇之前,先问一下大家都知道几种居中的实现方式? 面试时答出来两三个就不错了,就怕面试官还让你继续说。今天就来总结一下这些居中的方式 使用flex布局设置居中。 使用flex 时也能通过给子项设置margin: auto实现居中。 使用绝对定位的方式实现水平垂直居中。 使用grid设置居中。 使用grid时还能通过给子项设置margin: auto实现居中。 使用tabel-cell实现垂直居中。 还有一种不常用的方法实现垂直居中。 最后还有一种奇葩的方法。容器设置position: relative。孩子设置 top、left、bottom、right都设
0 0
HTML+CSS实现商品介绍模考(以Apple14为案例)
本文以最通俗易懂的语言为读者提供一个经典CSS小案例,商品介绍模块,并且结合时事,以Apple14为案例进行讲解。
0 0
js实现body背景图自动扩缩 光靠css几乎无法实现这样的效果
js实现body背景图自动扩缩 光靠css几乎无法实现这样的效果
0 0
css实现弧形边框
css实现弧形边框
0 0
教你用HTML+CSS实现百叶窗动画效果
我们浏览网页的时候总能看见一些炫酷的特效,比如百叶窗效果,本文我们就用HTML+CSS制作一个百叶窗小项目,适合刚学前端的小伙伴,使用代码简单易懂,很容易上手,学习完本文后,相信你也能敲出来属于自己的百叶窗效果,改变图片及相应盒子的大小,有女朋友的可以试着放几张在一起的照片,也是一件非常浪漫的事
0 0
利用 SplitingJS 配合 CSS 实现文字"蠕动"效果
利用 SplitingJS 配合 CSS 实现文字"蠕动"效果
0 0
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
CSS进阶向--配合Vue动态样式实现“超炫酷”圆环菜单
0 0
CSS进阶向--纯css实现流光边框(二)
CSS进阶向--纯css实现流光边框(二)
0 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;活在今天,你只要把自己完全展示给别人看。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载


http://www.vxiaotou.com