本文发布于:2010-04-21,最后更新于:2022-12-01,如果内容失效请留言告知。
近年来国家多灾多难,祖国同胞们在面对这些自然灾害面前,只能以哀悼的方式表达我们的悼念之情,表达我们的友爱和团结。
国哀日里,很多站长都自觉的挂起了网站素装,以自己的方式表达我们的情感。
但是,很多站长有点苦恼的是,网上流行的素装代码,只适合IE浏览器。那么,有什么简单点的方式,让所有浏览器均能显示这种效果呢?
修改图片,对了,这确实是最简单也是唯一的方式,百度等大型网站都是这么做的。
然而,站长们面对站点里众多的图片,依然感觉很难下手。其实,我们只需要实现站点的主题色调为灰白就行了。这样一来,需要修改的图片并不是很多。
下面让志文工作室来给大家介绍一下,添加代码以及简单修改图片的方法,具体效果可参看志文工作室全站页面。
可以在网站的css文件的底部,加入如下参考代码:
1 2 3 4 5 6 7 8 9 10 11 12 | *{ color : #555 !important ; border-color : #949494 !important } html,body,div,img { -webkit- filter : grayscale( 100% ); -moz- filter : grayscale( 100% ); -ms- filter : grayscale( 100% ); -o- filter : grayscale( 100% ); filter : grayscale( 100% ); filter : url ( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='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>#grayscale" ); filter : progid: DXImageTransform.Microsoft.BasicImage(grayscale= 1 ); filter : gray ; } |
当然如果你要加在单独页面里,也可以这样加在页面的头部:
1 2 3 4 5 6 7 8 9 10 11 12 | <style type= "text/css" > html,body,div,img { -webkit- filter : grayscale( 100% ); -moz- filter : grayscale( 100% ); -ms- filter : grayscale( 100% ); -o- filter : grayscale( 100% ); filter : grayscale( 100% ); filter : url ( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='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>#grayscale" ); filter : progid: DXImageTransform.Microsoft.BasicImage(grayscale= 1 ); filter : gray ; } </style> |
让我们以自己的方式,向玉树受灾同胞们哀悼祈福!