灰度背景 Css 图像答案

【问题标题】：Greyscale Background Css Images灰度背景 Css 图像
【发布时间】：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？）来解决在不太高级的浏览器上对过滤器支持不足的问题？

【问题讨论】：

你试过这个吗：stackoverflow.com/a/8612047/1298944
另外，看看这个：stackoverflow.com/a/7273987/1298944
还没绑，第一时间反馈，谢谢
画布方式html5rocks.com/en/tutorials/canvas/imagefilters
对于“canvas+jquery 带过渡效果”的解决方案：stackoverflow.com/questions/7704415/…

标签： css image background cross-browser grayscale

【解决方案1】：

我知道这是一个很老的问题，但它是 dadduckgo 上的第一个结果，所以我想分享一下我认为这是一个更好、更现代的解决方案。

您可以使用background-blend-mode属性来实现灰度图像：

#something {
  background-color: #fff;
  background-image: url("yourimage");
  background-blend-mode: luminosity;
}

如果要移除效果，只需将混合模式更改为initial。

如果这个元素在有背景的东西上，你可能需要稍微调整一下背景色。我发现灰度不取决于实际颜色，而是取决于 alpha 值。因此，如果您在父节点上有蓝色背景，请在 #something 上设置相同的背景。

您还可以使用两张图片，一张有颜色，另一张没有，并将两者都设置为背景并使用其他混合模式。

https://www.w3schools.com/cssref/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/cssref/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" width="600" height="600" 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 浏览器呢？