灰度背景 Css 图像
Posted
技术标签:
【中文标题】灰度背景 Css 图像【英文标题】：Greyscale Background Css Images 【发布时间】：2013-04-26 18:00:19 【问题描述】：我在网上搜索了很多，但我找不到一个跨浏览器解决方案来将 css 背景图像淡化为灰度并返回。
唯一可行的解决方案是应用 CSS3 滤镜灰度：
-webkit-filter: grayscale(100%);
但这仅适用于 Chrome v.15+ 和 Safari v.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？）来解决在不太高级的浏览器上对过滤器支持不足的问题？
【问题讨论】：
你试过这个吗：***.com/a/8612047/1298944 另外，看看这个：***.com/a/7273987/1298944 还没绑，第一时间反馈，谢谢 画布方式html5rocks.com/en/tutorials/canvas/imagefilters 对于“canvas+jquery 带过渡效果”的解决方案：***.com/questions/7704415/… 【参考方案1】：我知道这是一个很老的问题，但它是 dadduckgo 上的第一个结果，所以我想分享一下我认为这是一个更好、更现代的解决方案。
您可以使用background-blend-mode属性来实现灰度图像：
#something
background-color: #fff;
background-image: url("yourimage");
background-blend-mode: luminosity;
如果要移除效果，只需将混合模式更改为initial。
如果这个元素在有背景的东西上，你可能需要稍微调整一下背景色。我发现灰度不取决于实际颜色，而是取决于 alpha 值。因此，如果您在父节点上有蓝色背景，请在 #something 上设置相同的背景。
您还可以使用两张图片，一张有颜色，另一张没有，并将两者都设置为背景并使用其他混合模式。
https://www.w3schools.com/cs-s-ref/pr_background-blend-mode.asp
但它不适用于 Edge。
编辑：我错过了问题的“淡化”部分。
如果你想让它从/到灰度淡出，你可以在背景颜色上使用 css 过渡来改变它的 alpha 值：
#something
background-color: rgba(255, 255, 255, 1);
background-image: url("yourimage");
background-blend-mode: luminosity;
transition: background-color 1s ease-out;
#something:hover
background-color: rgba(255, 255, 255, 0);
为了完整起见，我还添加了一个 codepen 示例https://codepen.io/anon/pen/OBKKVZ
【讨论】：
非常好的答案，但它是如何缩小到 Edge 的？ @bluantinoo，我不确定，我没有 Windows，所以没有 Edge，但看起来 Edge github.com/idevsoftware/js-background-blend-mode 有一些 polyfill，它使用 Canvas 和其他使用 SVG 的技术，但是我无能为力。【参考方案2】：使用当前的浏览器，您可以像这样使用它：
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/cs-s-ref/css3_pr_filter.asp
【讨论】：
它的工作原理是使整个元素（包括背景图像）变为灰度，但元素中的任何彩色图像也将是灰度的【参考方案3】：给你：
<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>
编辑 2（适用于 IE10-11 用户）： 上述解决方案不适用于 Microsoft 最近对浏览器所做的更改，因此这里有一个更新的解决方案，可让您进行灰度（或去饱和）您的图像。
<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" filter="url(#desaturate)" />
</svg>【讨论】：
Hello Element，其实我一直都是这样做的。我只是希望全景图已经进化，我不需要构建双层布局！不过还是谢谢:) @bluantinoo - 不客气 :) 双层布局是什么意思？此外，我相当有信心我给你的解决方案正是你所要求的。您的具体请求/问题是“一种跨浏览器解决方案，可将 css 背景图像淡化为灰度并返回”和“是否有任何解决方案（可能使用 jquery？）来解决在不太高级的浏览器上缺乏对过滤器的支持？”用于淡入灰色的解决方案。这就是我提供给你的。我错过了什么吗？ 您实际上是对的，但是由于我的问题已经很老了，我只是希望浏览器现在可以支持更简单的 css 规则来在翻转时将灰色背景图像变为灰色。对于双层布局，我指的是您提出的第一个解决方案（两个元素堆叠，一个灰色，另一个彩色）。最后我必须说你的第二个选项可能是我最喜欢的，因为它允许更灵活的使用。此外，我的问题太老了，以至于我标记了您的答案，不仅有效，而且解释得很好！再次感谢:) 此解决方案将受影响元素中的所有内容变为灰色，而不管不幸的是应该保持彩色的内容如何。 在当前版本的 chrome (59) 中，我必须将最后一行filter: url(...) 移到所有其他过滤器之前才能使其工作。以防万一有人遇到类似问题。【参考方案4】：
你也可以使用：
img
filter:grayscale(100%);
img:hover
filter:none;
【讨论】：
我问的是css中的背景图片，而不是html中的img元素【参考方案5】：您真的不需要使用复杂的编码！
灰度悬停：
-webkit-filter: 灰度(100%);
灰度“悬停”：
-webkit-filter: 灰度(0%);
我只是让我的 css 类有一个单独的悬停类并添加到第二个灰度中。如果您真的不喜欢复杂性，那真的很简单。
【讨论】：
那么非 webkit 浏览器呢？以上是关于灰度背景 Css 图像的主要内容，如果未能解决你的问题，请参考以下文章