实现整个网页变灰色调

记得去年的一次面试，面试官说道那我们来聊聊CSS吧，当时信心足得很心想：CSS能有什么好问的呀。哪想问的第一个问题就不知道。
当时他问：你知道怎么讲一个页面整个变为灰色吗，就纯用CSS。
第一时间我其实都还没太明白是什么意思，他跟我讲了一个实例：例如每到特殊的日子，2.12，南京大屠杀等,那种大的网站都会讲页面整个变为灰色。
这我才算是明白了，可惜我没有了解过，无法做到。
回到家后，立马动手查了下实现的方法，动手写了几个demo，是个简单又炫酷的css3属性呀。
在样式中添加一个过滤器属性flite，且属性值为Garyscale（100%）

例一：将图片变灰

html代码：

<img class="gary" src="img/20141002023011800.jpg" alt=""/>
<img src="img/20141002023011800.jpg" alt=""/>

css代码：

 .gary{
            filter:grayscale(100%);
            -webkit-filter:grayscale(100%);
            -moz-filter:grayscale(100%);  /*为兼容各浏览加上各前缀*/
            -ms-filter:grayscale(100%);
            -o-fliter:garyscale(100%);
        }     

例二:将整个网页变为灰色

html代码：

 <header>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li>e</li>
        </ul>
    </header>
    <nav>
        <img class="gary" src="img/20141002023011800.jpg" alt=""/>
        <p>扫描二维码进入</p>
    </nav>
    <footer>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li>e</li>
        </ul>
    </footer>  

css代码：

html{
            filter:grayscale(100%);
            -webkit-filter:grayscale(100%);
            -moz-filter:grayscale(100%);  /*为兼容各浏览加上各前缀*/
            -ms-filter:grayscale(100%);
            -o-fliter:garyscale(100%);
        }
        header,footer{
            height:10rem;
            width:100%;
            background:red;
            text-align:center;
            position:fixed;
        }
        header{
            top:0;
        }
        footer{
            bottom:0;
        }
        ul li{
            float:left;
            width:20%;
            color:#fff;
            list-style:none;
            font-size:3rem;
            line-height:10rem;
            /*   font：italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;*/
        }
      nav{
          width:100%;
          text-align:center;
          margin-top:40%;
      }
        p{
            font-size:3rem;
        }

就是这么简单却炫酷
所以前端人员的征途是星辰大海，因占据了小块礁石而固步自封实在不可取，看css里都还有很多奇妙的东西从未去探索过呢