65

我在网上搜索了很多，但我找不到一个跨浏览器解决方案来将 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？）来解决在不太高级的浏览器上缺乏对过滤器的支持？

4

5 回答 5

83

干得好：

<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 中进行了测试。我还附上了一张图片来展示我的实现结果。DIV 样本中的灰度背景图像

编辑：另外，如果你希望图像只是用 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 用户）：上述解决方案不适用于微软最近对浏览器所做的更改，因此这是一个更新的解决方案，可让您对图像进行灰度（或去饱和）处理。

<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>

于 2014-02-20T05:33:39.027 回答
23

我知道这是一个非常老的问题，但它是 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

于 2018-10-30T15:59:27.623 回答
19

使用当前的浏览器，您可以像这样使用它：

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

于 2016-09-12T10:50:40.547 回答
-4

您还可以使用：

img{
   filter:grayscale(100%);
}


img:hover{
   filter:none;
}
于 2015-06-19T12:29:46.260 回答
-5

你真的不需要使用复杂的编码！

灰度悬停：

-webkit-filter：灰度（100%）；

灰度“悬停”：

-webkit-filter：灰度（0%）；

我只是让我的 css 类有一个单独的悬停类并添加到第二个灰度中。如果您真的不喜欢复杂性，那真的很简单。

于 2014-12-19T04:01:20.130 回答