为雅安祈福网页改为黑白灰

08年汶川大地震之后,学校领导根据国务院文件,5.19-5.21为全国哀悼日,在此期间要求把学校官方网站改为黑白灰,表示为全国哀悼日。开始不懂得CSS工作方法,和周敏逃课改网页文件,结果弄了半天还是没有改了。后来一计科的学长给了段CSS代码一下子就事半功倍,改好了。

为雅安祈福网页改为黑白灰

才事隔几年灾难再次来到四川,真心为雅安地震中受灾的同胞们祈福,愿他/她们平安幸运度过难关。

为雅安祈福网页改为黑白灰

网页黑白灰修改CSS代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装

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

当时学校的电脑主要是使用XP+IE浏览器,没有人装非IE内核的浏览器,改了这段代码看看有效果就完事了。今天再使用这一条代码才发现,原来只是对IE内核的浏览器有用,使用惯了的谷歌浏览器死活出不为效果。网上查查资料,发现需要更高级的代码才能让所有的浏览器起效果,CSS代码如下:

1
2
3
4
5
6
7
8
9
10
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:url(desaturate.svg#grayscale);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);}

在这个样式代码中,涉及到了一个文件,就是desaturate.svg,从文件扩展名中可以看到,利用到了SVG技术了,代码如下:

1
2
3
4
5
6
7
8

<svgversion="1.1"xmlns="http://www.w3.org/2000/svg">

<filterid="grayscale">

<fecolormatrixtype="matrix"values="

0.3333 0.3333 0.3333 0 0

0.3333 0.3333 0.3333 0 0

0.3333 0.3333 0.3333 0 0

0  0  0  1 0"/>

</filter>

</svg>

使用这段CSS代码的同量需要将这SVG代码保存为desaturate.svg,再通过url链接才可以起作用。



您可以选择一种方式赞助本站

支付宝转账赞助

支付宝扫一扫赞助

微信钱包扫描赞助

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情