灰度背景Css图像
我在网上搜了很多，但我找不到一个跨浏览器解决方案，以褪色的CSS背景图像灰度和回。灰度背景Css图像
唯一的工作解决方法是使用CSS3过滤灰阶：
-webkit-filter: grayscale(100%);
但这个工程只是使用Chrome 15节+和Safari .6 + （你可以在这里看到：http://css3.bradshawenterprises.com/filters/）
许多网页在线谈到这个解决方案变为灰色元素：
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"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
（你可以在这里看到：http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html）
但实际上它似乎不适用于css背景图像，就像webkit过滤器一样。
有没有解决方案（可能与jQuery？）来破解这种缺乏对不太高级的浏览器上的筛选器的支持？
在这里你去：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>bluantinoo CSS Grayscale Bg Image Sample</title>
<style type="text/css">
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,<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");
-o-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");
-webkit-filter: grayscale(100%);
filter: gray;
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");
}
.nongrayscale {
background: url(yourimagehere.jpg);
}
</style>
</head>
<body>
<div class="nongrayscale">
this is a non-grayscale of the bg image
</div>
<div class="grayscale">
this is a grayscale of the bg image
</div>
</body>
</html>
在Firefox，Chrome和IE浏览器进行了测试。我还附上了一张图片来展示我的实施结果。
编辑：另外，如果你想要的形象只是来回切换使用jQuery，下面是该页面的源代码...我已经列入本网站链接的jQuery和和形象，不在线，所以你应该只能够复制/粘贴来测试它：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>bluantinoo CSS Grayscale Bg Image Sample</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
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,<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");
-o-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");
-webkit-filter: grayscale(100%);
filter: gray;
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");
}
.nongrayscale {
background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);
}
</style>
<script type="text/javascript">
$(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);
});
});
</script>
</head>
<body>
<div id="image" class="nongrayscale">
rollover this image to toggle grayscale
</div>
</body>
</html>
EDIT 2（对于IE10-11用户）：上述解决方案将不会与微软浏览器作出的后期变化工作，所以这里有一个更新的解决方案，可以让你对图像进行灰度（或去饱和）处理。
<svg>
<defs>
<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
<feColorMatrix type="saturate" values="0" />
</filter>
</defs>
<image xlink:href="http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg>Hello元素，实际上这是我一直这样做的方式。我只是希望全景已经发展，我不需要建立一个双层布局！但是，无论如何感谢:) – bluantinoo 2014-02-21 12:51:29
@bluantinoo - 不客气:)你是什么意思的双层布局？另外，我相信我给你的解决方案正是你所要求的。 您的具体要求/问题是“跨浏览器解决方案，将css背景图像淡化为灰度并返回”和“是否有任何解决方案（可能使用jquery？）来破解对不太先进的浏览器上的筛选器缺少支持？为淡入灰色的解决方案。这就是我提供给你的。我错过了什么吗？ – Element808 2014-02-21 19:00:23
你其实是对的，但由于我的问题很老，我只是希望浏览器现在可以支持更简单的CSS规则来翻转灰色背景图像。对于双层布局，我指的是您提出的第一个解决方案（两个元素堆叠，一个灰色，另一个着色）。最后，我必须说，你的第二个选择可能是我最喜欢的，因为它允许更灵活的使用。此外，我的问题太老了，以至于我在标记你的答案，不仅在工作，而且甚至解释得很好！再次感谢:) – bluantinoo 2014-02-22 23:11:13
你并不需要真正使用复杂的编码！
灰度悬停：
-webkit滤波器：灰度（100％）;
灰度 “悬停出”：
-webkit滤波器：灰度（0％）;
我只是让我的css类有一个单独的悬停类，并添加到第二个灰度。如果你真的不喜欢复杂性，这很简单。
那么非webkit浏览器呢？ – bluantinoo 2015-01-08 20:02:47
您还可以使用：
img{
filter:grayscale(100%);
}
img:hover{
filter:none;
}
我问了背景图像在CSS中，而不是img HTML中的元素 – bluantinoo 2015-06-23 14:46:30
使用目前的浏览器，你可以使用它像这样：
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
，并解决它：
img:hover{
-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
filter: grayscale(0%);
}
与我一起工作，是矮得多。 甚至有更多的人能在CSS中做：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |
hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
欲了解更多信息和支持的浏览器看到：http://www.w3schools.com/cssref/css3_pr_filter.asp
这对背景图像不起作用 – Tijmen 2017-03-08 17:10:14
适用于我的背景图像... – 2017-09-18 08:52:08
你有没有尝试过这样的：http://stackoverflow.com/a/8612047/1298944 – 2013-05-03 05:18:11
另外，看看这个：http://stackoverflow.com/a/7273987/1298944 – 2013-05-03 05:46:15
我还没绑，我会第一时间反馈我的，谢谢现在 – bluantinoo 2013-12-12 19:36:08