html背景图灰度,灰度背景Css图像
在这里你去：
bluantinoo CSS Grayscale Bg Image Samplediv {
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 Samplediv {
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
EDIT 2(对于IE10-11用户)：上述解决方案将不会与微软浏览器作出的后期变化工作，所以这里有一个更新的解决方案，可以让你对图像进行灰度(或去饱和)处理。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！