CSS css灰色代码

阅读(3230)

经常的,在切图的过程中会遇到让网站整体变灰,或者某些交互需求需要让图片在高亮和不可点(灰色)状态间切换,这时,就需要一个灰色代码,以下是我曾经使用过的一个兼容灰色代码:

.gray{
     -webkit-filter: grayscale(100%);  /* webkit */
     -ms-filter: grayscale(100%);      /* maybe ie10+ */
     -o-filter: grayscale(100%);       /* opora */
     filter: url("data:image/svg+xml;utf8,<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>#grayscale"); /* ff */
     filter: gray;  /* ie10- */
}

上面代码基本能适配大部分浏览器,但在IE10以上的浏览器不支持,当年IE11还未出来的时候,我们在页面上加了如下meta直接抛弃IE10,以兼容理想状态下的所有浏览器:

<meta http-equiv="X-UA-Compatible" content="IE=9">

以上hack手段,仅供参考,顺便提供一个全兼容的JS方案: grayscale.js

Tags: