CSS css灰色代码

阅读(3373)

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

.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: