想要实现上图灰色效果，方法如下：
这段css代码可以变网页为黑白，将代码加到css最顶端就可以实现素装。
html{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter:progid:dximagetransform.microsoft.basicimage(grayscale=1);}
如果你的页面中没有html标签，记得加进去，可以加以下html5标签，或者更换上面的css标签的html为body或者其它。
<!doctype html><html></html>
有一些网站flash动画的颜色不能被css滤镜控制，可以在flash代码的<object …>和</object>之间插入：
<param value="false" name="menu"/><param value="opaque" name="wmode"/>
如果某些带有flash的页面仍显示彩色，或浏览器上下滚动条拖动时flash flv播放器变花（例如剑网3、剑侠世界官网分流页），将flash改为js输出（本例为swfobject）：
<script type="text/javascript" src="/js/swf.js"></script><p id="video_content"></p><script type="text/javascript"><!--var video_player_so = new swfobject("video-542.swf", "sotester", "439", "246", "7");video_player_so.addparam("wmode", "opaque");video_player_so.addparam("allowfullscreen","true");video_player_so.addparam("allowscriptaccess","always");video_player_so.write("video_content");//--></script>
大家学会了吗？赶紧动手尝试一下吧。
相关推荐：
如何使用css让图片实现半透明的效果
css3中使用视窗单位来布局的方法
关于css浮动元素的居中
以上就是css如何将网站网页变灰色的详细内容。