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