css 图片变黑白效果 使用CSS将图片转换成黑白的 兼容方法

html-css027

css 图片变黑白效果 使用CSS将图片转换成黑白的 兼容方法,第1张

直接将其放入页面中的<style></style>即可，或者外部样式直接在内部引用。

html,body { 

-webkit-filter: grayscale(100%) 

-moz-filter: grayscale(100%) 

-ms-filter: grayscale(100%) 

-o-filter: grayscale(100%) 

filter: grayscale(100%) 

filter: gray 

}

亲，告诉你个简单的方法，在浏览器顶部加句这个，让他使用IE9模式就OK了，不必去为IE10单独做那么多事情。

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

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") /*     Firefox 10+, Firefox on Android */

filter:gray /* IE6-9 */

-webkit-filter:grayscale(100%) /* Chrome 19+, Safari 6+, Safari 6+ iOS */

-moz-filter: grayscale(100%)

-ms-filter: grayscale(100%)

-o-filter: grayscale(100%)}

上面是所有浏览器包括安卓的图片边灰的样式

可以，在ie下可以用filter属性，如下：

filter： progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)

不过，FF上无法实现的，因为灰度滤镜属性在其它非ie浏览器中不存在，该特效无法显示。不像透明滤镜在FF里面也有。

所以，只能使用两张图片替换或者一张图片滑动门的方案。