网站变成灰色的代码


转自:http://www.cnblogs.com/huanlei/archive/2013/04/23/3039012.html#2679947


IE浏览器中用了滤镜来解决

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

 

chrome下

?
-webkit-filter: grayscale(100%);

 

 

IE+火狐+chrome

?
html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url(desaturate.svg#grayscale);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

 大面积的操作降低页面性能是肯定的,这里分享这个也只是想跟大家说一下,最近我看到这个样式,感觉太厉害了。在这个样式代码中,涉及到了一个文件,就是desaturate.svg,从文件扩展名中可以看到,利用到了SVG技术了,代码如下:

?
<svg version="1.1" 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>

只需要将这代码保存为desaturate.svg,再通过url链接就可以了,十分简单。在前面看到的demo页面中是在body中增加了样式,影响页面中所有的元素,如果有需要的话,可以单独设置一个公共库中的类名来调用,如:  

?
.pic_gray {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url(desaturate.svg#grayscale);
    filter: gray;
    -webkit-filter: grayscale(1);
}

  

 

  

 

 

 完美兼容,或者直接在css里添加:

复制代码
<style type="text/css">
html{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-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);-webkit-filter: grayscale(1);}
</style>
复制代码

 

 


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页