网站页面都变成灰色了，是怎么实现的？
【摘要】 “苟利国家生死以，岂因祸福避趋之”
最近为了悼念一位伟人，好多网站、APP首页都变成灰色了。比如我们的华为云首页：
那么技术层面上，这是怎么做到的呢？首先映入脑海的是UI界面全部换了一套，但是就为了变个颜色（内容都不变），成本也太高了。那么前端界面里是否有啥函数可以做到呢？
先打开我们的华为云网页，然后按F12按钮进入开发者模式，选择元素定位器，点击<html>这一行，就会在界面侧边样式面板里看到这段代码：
代码如下：
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: grayscale(100%);
}
这里展示的filter: grayscale(100%);是什么意思呢？直接google一下：
The grayscale() CSS function converts the input image to grayscale. Its result is a
<filter-function>.
grayscale()这个CSS函数可以把输入的图像变为灰度的，输出的结果是filter函数。
我们可以试一下。当输入为0的时候：
输入为小数或则百分比的时候：
当输入为1的时候：
注意函数里的参数，范围要在0到1之间，小数和百分数都可以。要是超过1就是100%的效果，要是小于0就是0%的效果。
函数兼容的浏览器
参考链接
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）