网页|如何实现网页变灰效果
网页|如何实现网页变灰效果
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代码不生效的时候可以考虑一下代码的权重问题。
愿天堂没有病痛!