A-A+

让网站全站变灰的简单方法

2016年08月17日 前端设计 评论 4 条 阅读 9 views 次

通常在遇到不可抗拒的灾害或者全国哀悼日的时候,许多大站都是把网页变灰来做哀悼,如何在最短的时间内就把整站网页变成灰色,实际上是有技巧的,我们只需要一句或者一段代码就可以实现,下面是夏日博客收集网上的一些简单方法。

全站CSS样式,通常情况下,整站都是有一个共用的CSS样式的,我们只需要在整站 CSS 样式里面添加如下的代码就可以了:

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

只简单的一句 CSS 样式就可以把网页变为黑白色。

有的网站可能比较简单,没有单独的整站CSS样式文件,哪也不要紧,只需要找到首页,在网页的 head 之间添加上上面的 CSS 样式代码就可以了,如下:

  1. <style>  
  2. html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}  
  3. </style>  

有的用户反映上面的 CSS 代码不能够生效,这是因为我们的 html 并不完整,可以先检查一下 html 文件是否有如下的代码,如果没有的话就添加上去,再看看是否已经生效了。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  

这是 html 的顶部文件,检查一下和自己的是否一样。

虽然现在的 flash 动画已经很少有人在用了,但毕竟还没有完全被淘汰,上面的 CSS 样式代码并不能使 flash 变灰或者变黑,我们需要进行处理一下 flash 的代码,在 <object …>和</object> 之间插入如下的代码:

  1. <param value="false" name="menu"/>  
  2. <param value="opaque" name="wmode"/>  

好了,除了上面的网页变灰CSS代码之外,还有一个更简单的CSS样式,代码如下:

  1. <style type="text/css">  
  2. html {  
  3. FILTER: gray  
  4. } //xiariboke.net  
  5. </style>  

只需要将这段代码放入到 html 的 head 之间就可以了,如果有通用 CSS 样式的话就放到通用的CSS样式里面就可以了。

4 条留言  访客:4 条  博主:0 条

  1. 憧憬Licoy

    等不更新了就全站变灰

    • smiling

      不更新了,全站变灰,这是几个意思?

  2. 小萝博客

    直接开插件

    • smiling

      博客的插件里面也是这样的代码,插件还是越少用越好吧。

给我留言