html跳转到另一个html页面_Html页面借助CSS实现哀悼效果

今年清明节全国致敬英雄，为表示哀悼，很多网站的首页都变成了黑白的，这是怎么实现的呢？一般人都会想到给整个页面的所有内容逐一替换样式，将文字、图像和按钮都处理成灰色。但是工作量比较大，而且一旦有遗漏的元素就很尴尬了。

下面小编教你一招，绝对实用，只需要在Html文件的样式中加入如下代码：

html{    -webkit-filter: grayscale(1);    -moz-filter: grayscale(1);    -ms-filter: grayscale(1);    -o-filter: grayscale(1);    filter: grayscale(1);    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

试一下，效果强悍吧？

那么这到底是怎么回事呢？

CSS3里的filter属性起滤镜的作用，通常用来处理图片的效果，比如模糊、饱和度和灰度，但是也可以用于其他页面元素，比如上面的代码就将灰度效果应用于html标签，影响整个页面的显示效果。

grayscale(x)的作用是将元素转换为灰度显示。值x定义转换的比例。值为100%则完全转为灰度，值为0%则无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；其中百分比数值也可以用浮点数表示，比如1等价于100%，.5等价于50%，0等价于0%。

再来看CSS3中各个前缀的声明都影响了哪些浏览器：

-webkit-：Safari和Chrome，Webkit引擎

-moz- ：Firefox，GEcko引擎

-ms- ：Internet Explorer，Trident引擎

-o- ：Opera(早期)，Presto引擎，后改为Webkit引擎

而实际上，靠 -ms- 前缀将滤镜应用在IE是不生效的，所以最后还附加了一句：

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

到此，大功告成！