html背景图灰度,灰度背景的CSS图片(Greyscale Background Css Images)

干得好：

bluantinoo CSS Grayscale Bg Image Sample

div {

border: 1px solid black;

padding: 5px;

margin: 5px;

width: 600px;

height: 600px;

float: left;

color: white;

}

.grayscale {

background: url(yourimagehere.jpg);

-moz-filter: url("data:image/svg+xml;utf8,#grayscale");

-o-filter: url("data:image/svg+xml;utf8,#grayscale");

-webkit-filter: grayscale(100%);

filter: gray;

filter: url("data:image/svg+xml;utf8,#grayscale");

}

.nongrayscale {

background: url(yourimagehere.jpg);

}

this is a non-grayscale of the bg image

this is a grayscale of the bg image

在Firefox，Chrome和IE浏览器进行了测试。 我还附有图片，以显示我的我实现这个结果。

编辑：另外，如果你想要的形象只是来回切换使用jQuery，下面是该页面的源代码...我已经列入本网站链接的jQuery和和形象，不在线，所以你就应该能够复制/粘贴到测试一下：

bluantinoo CSS Grayscale Bg Image Sample

div {

border: 1px solid black;

padding: 5px;

margin: 5px;

width: 600px;

height: 600px;

float: left;

color: white;

}

.grayscale {

background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);

-moz-filter: url("data:image/svg+xml;utf8,#grayscale");

-o-filter: url("data:image/svg+xml;utf8,#grayscale");

-webkit-filter: grayscale(100%);

filter: gray;

filter: url("data:image/svg+xml;utf8,#grayscale");

}

.nongrayscale {

background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);

}

$(document).ready(function () {

$("#image").mouseover(function () {

$(".nongrayscale").removeClass().fadeTo(400,0.8).addClass("grayscale").fadeTo(400, 1);

});

$("#image").mouseout(function () {

$(".grayscale").removeClass().fadeTo(400, 0.8).addClass("nongrayscale").fadeTo(400, 1);

});

});

rollover this image to toggle grayscale

编辑2(对于IE10-11用户)：上述解决方案将不会与微软浏览器作出的后期变化工作，所以这里是一个更新的解决方案，让您为灰度(或饱和度)图像。