`

是整个网页以 灰度 模式 显示 灰色(黑白)

css 
阅读更多
/*  css3  的filter  兼容性,请参考
http://caniuse.com/#feat=css-filters
*/

html {
  
  -webkit-filter: grayscale(1); //  如果未设置值,默认是100%
  filter:gray();  //或者filter : progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
  filter: url(gray.svg#grayscale);
}



/* http://www.zhangxinxu.com/study/201208/css3-grayscale-filter-use-svg.html  */

针对firefox 参照上面css-filters 的兼容性,暂时使用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>


以上svg代码保存为svg文件在css里 加入

filter: url(gray.svg#grayscale);
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics