灰度背景 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 图像的主要内容,如果未能解决你的问题,请参考以下文章

在图像悬停时以圆形设置背景大小

GMM模型是啥

针对于高频低频图像的理解

CAD把一个dwg文件,或者图像文件当着一个背景导入(com接口VB语言)

CSS - 继承分层背景图像

背景:和背景图像之间的CSS区别: