网页|如何实现网页变灰效果
2020年4月4日，星期六农历三月十二清明节。在以往的这一天或许并没有太多的特别之处。但今年我国正经历着一场浩劫，新冠肺炎席卷武汉和湖北地区，无数的白衣天使冲向一线，给中国人民构筑了一道坚固的抗疫长城。在这场战役中有一些英雄倒在了抗疫一线。如今，全国为在新冠肺炎中牺牲的英雄和失去生命的同胞降半旗默哀。
1.引言
在清明节这天几乎所有的网站都变成了灰色，那么这种效果是怎么实现的呢？今天就来简单的实现一下这样的效果。
图1.1 效果图
先简单的看一下这个网站最初的效果，下面开始将整个网站的变为灰色。
（1）可以在网站的源代码的css中改变网页的样式，为了改变整个网页的样式，肯定要将css代码放在最大的那个标签里面，一般网站是以<html>标签开始</html>标签结束，所以只需要将css所修饰的范围在<html>标签以内的所有东西。可以采用css里面的filter函数，让背景变成黑白色。
|
html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); }
|
图1.2 效果图
这样网站就变成了黑白色，需要详细的了解filter函数的可以参考菜鸟教程里面的filter函数。
（2）css修饰有三种方式，所以三种方式都是可以的，这里就将剩下的方式列出来仅供参考。
|
<style type="text/css"> html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);} </style>
|
|
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);">
|
通过这几种简单的方法就可以让网页变成灰色了。
（3）网站一经发布就会有不同的人去维护，还可以采用一种方式。大部分人的习惯都是将代码放在<body>标签里面，所以也可以通过<body>标签去修饰网页。为了能够在不同的浏览器里面兼容，于是设置了多重属性。
|
body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms-filter: grayscale(100%); /*ie9*/ -o-filter: grayscale(100%); /*opera*/ filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter:gray; /*ie9- */ }
|
2.总结
以上几种方法，都是通过CSS的滤镜来控制页面的显示而已，唯一不同的就CSS代码调用的方式。在css的修饰时还有权重问题，所以有时候css代码不生效的时候可以考虑一下代码的权重问题。
愿天堂没有病痛！
标签：网页,效果,100%,grayscale,filter,webkit,变灰,css From： https://www.cnblogs.com/webSnow/p/16954304.html