css怎么把样式变灰

html-css029

css怎么把样式变灰,第1张

单在link 加入滤镜 filter:gray使之变灰。 为何在鼠标放到连接上的时候 还是灰色？ 如果只在hover加 学习目的：用同一张彩色图片为背景，在连接平常的状态，图片为灰，鼠标悬停在链接上时恢复色彩。

下面是最大限度兼容所有浏览器的代码：

html{

    -webkit-filter:grayscale(100%)

    -moz-filter:grayscale(100%)

    -ms-filter:grayscale(100%)

    -o-filter:grayscale(100%)

    filter:grayscale(100%)

    filter:url("data:image/svg+xmlutf8,<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)

}

IE10以上不再兼容IE的滤镜啦，因为已经有css3了

http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx