一、问题或解决方法应用场景。

最近很多网站、APP 在昨天都变灰了，好多企业或者政府也要求开发人员将自己的网站页面变灰，那这种效果是怎么实现的呢？如果将图片，文字，按钮什么的一个个处理是不是太麻烦了， 所以这里给大家提供一个简单的方式，几行代码就解决问题了，So Easy !

创新互联服务项目包括七里河网站建设、七里河网站制作、七里河网页制作以及七里河网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，七里河网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到七里河省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

二、代码及效果图片 

-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);

下方是效果展示：  修改之前的页面：

修改之后的页面：三、注意事项，着重注意点。 

直接在前端HTML 标签上，在样式里加上面的代码就可以实现。 

你学会了吗？可以直接F12 ,直接调试操作尝试一波哦！

四、知识解答

grayscale  含义解释（来源菜鸟教程）

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

持续更新中、、、、、、本人代码新手，能力有限，如有不足之处，欢迎大家一起讨论交流。 

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

当前题目：网站页面变灰小技巧-创新互联
链接分享：http://lswzjz.com/article/dcssjo.html