码迷,mamicode.com
首页 > Web开发 > 详细

致敬英雄,共悼逝者,css 让页面变黑白

时间:2020-04-04 11:54:25      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:使用   code   也有   microsoft   image   一个   一行代码   网站页面   -o   

壹 ? 引

今天是四月四日清明节,也是全国哀悼抗疫烈士的一天。细心的同学可以发现,不仅是娱乐活动以及游戏全部停止,当我们打开各大门户网站,网站页面也都变成了黑白,那么具体怎么做呢,这里可以借用CSS3 的 filter滤镜属性,一个最简单的设置:

html {
    -webkit-filter:grayscale(100%);
    filter: grayscale(100%);
}

由于是CSS3属性,所以自然会存在兼容问题,我们通过can i use查阅,可以看到该属性对于IE等老旧浏览器并不友好。

技术图片

当然,网上也有提供一个兼容其它浏览器的较全版本,如下:

html{
    filter: gray;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\‘http://www.w3.org/2000/svg\‘><filter id=\‘grayscale\‘><feColorMatrix type=\‘matrix\‘ values=\‘0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\‘/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

简单说一下,这一段代码中,filter:url("data:image...这一段主要针对svg图片进行解码与颜色填充达到修改颜色的目的。

filter:progid:DXImageTransform.Microsoft.BasicImage()此行代码为IE自己提供的滤镜实现,性能不太友好。

作为参考,我查阅了腾讯视频,哔哩哔哩,开源中国等网站对于黑白效果的实现。

哔哩哔哩的简单粗暴,仅一行代码,当然针对于头部图片素材则是单独替换的黑色图片,并非通过样式修改:

html{
    webkit-filter: grayscale(.95);
}

腾讯视频使用代码如下,且在IE浏览器表现良好:

html{
    filter: gray;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

而开源工作使用的就是我上面提到的那一大段样式了。

综合来说,上述代码能解决大部分情况,但网站不同,所展现的内容也不尽相同,可能还有视频,flash情况,特殊情况就只能针对性去处理了。

另外,如果样式实在搞不定的,我们也可以通过JS来代劳处理页面颜色展现,例如 grayscale.js等。

关于让页面变黑白的样式就说道这里了,其实也只是个简单记录。

致敬英雄,共悼逝者,css 让页面变黑白

标签:使用   code   也有   microsoft   image   一个   一行代码   网站页面   -o   

原文地址:https://www.cnblogs.com/echolun/p/12630648.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!