实现整个网页变灰色调

来源：互联网发布：relief算法 python 编辑：程序博客网时间：2024/05/01 10:25

记得去年的一次面试，面试官说道那我们来聊聊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里都还有很多奇妙的东西从未去探索过呢

0 0