4月4日时,很多网站包括主页和内容(包括图片、按钮等)也都已经变成了灰色。当天我打开的csdn、人人视频都全部变为了灰色。
我当时第一想法是难道把这些图片都换了一遍吗???但是成本未免太高,且可能会有疏漏。今天在公众号里看到了一篇推文的详细解释,记录一下。
一、实际的解决方法:(仅对于网站)
加一个全局的CSS样式。加在最外层的html上。
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
二、什么是Filter — 滤镜?
filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。
- 通过 filter 样式改变了图片、颜色、模糊、对比度等等信息。
- 灰色图像,这里其实就是设置了 grayscale,其用法如下:
filter: grayscale(percent)
将图像转换为灰度图像。值定义转换的比例。percent 值为 100% 则完全转为灰度图像,值为 0% 图像无变化。值在 0% 到 100% 之间,则是效果的线性乘子。若未设置,值默认是 0。另外除了传递百分比,还可以传递浮点数,效果是一样的。
如:
filter: grayscale(1)
filter: grayscale(100%)
都可以将节点转化为 100% 的灰度模式。
所以一切到这里就清楚了,如果我们想要把全站变成灰色,再考虑到各浏览器兼容写法,可以考虑如下写法:
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
这样想要变灰的节点只需要加上 gray 这个 class 就好了,比如加到 html 节点上就可以全站变灰了。
三、各浏览器对filter的兼容性
除了 IE,其他的 PC、手机端的浏览器都支持了,Firefox 的 PC、安卓端还单独对 SVG 图像加了支持。
四、APP中是怎么实现的?
摘自:公众号下方的留言
- 有些资源是从Web接口获得的,比如banner,缩略图,小图标等。如微博。
- 某些颜色或者样式配置也是从接口获得的,是可配置的。
- 一些APP内嵌的Web页面,和网页原理是一样的。