grayscale – 学习画板

首页 » CSS » grayscale

grayscale

有时候需要做一些灰色的图片,鼠标划上去恢复彩色。IE6-9使用filter: gray即可实现,其他浏览器使用grayscale(100%)也可实现,但目前Firefox尚不支持,需要svg滤镜来实现

earth
.grayscale{
    -webkit-filter:grayscale(1); /* Chrome 19+ & Safari 6+ */
    /* Firefox 3.5+ */
    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:gray; /* IE6-9 */
    -webkit-transition:all 1.3s;
    -moz-transition:all 1.3s;
    -o-transition:all 1.3s;
    transition:all 1.3s; /* for chrome */
}
.grayscale:hover{
    -webkit-filter:grayscale(0); /* chrome*/
    filter:none; /*Firefox, IE */
}

有时候我想把svg滤镜单独拿出来,新建文件写入如下代码,保存为grayscale.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>

然后以如下方式引用

.grayscale{
    -webkit-filter:grayscale(1); /* Chrome 19+ & Safari 6+ */
    filter: url(grayscale.svg); /* Firefox 3.5+ */
    filter:gray; /* IE6-9 */
    -webkit-transition:all 1.3s;
    -moz-transition:all 1.3s;
    -o-transition:all 1.3s;
    transition:all 1.3s; /* for chrome */
}

IE10目前不支持,可以添加如下代码运行在IE9模式

<meta content="IE=9" http-equiv="X-UA-Compatible">
此文章发表在 CSS. 将 固定链接 加入收藏.