CSS仅使Div中的其他图像饱和的背景图像保持饱和 [英] CSS to Desaturate Background Image Only WIth Other Images in Div Stay Saturated
问题描述
我正在尝试使div的背景图像去饱和，同时使同一div中的图像保持饱和。我找到了一个与我要执行的操作接近的示例（带有模糊效果除外），但是尝试了多种示例，但均未成功。
I am trying to desaturate the background image of a div while leaving the images within that same div saturated. I've found one example close to what I'm trying to do (except w/ blur) but have tried multiple variations of it w/ no success.
在下面的代码中，.desaturate类正确地应用了过滤器属性，并将bg图像转换为b& w。 w /在此section标签中的另一个图像如预期那样继承了去饱和度，但是当我尝试通过img.saturate类重新饱和时，该图像未应用。我将代码缩减为尽可能简短/基本的内容，以解释我要做什么。任何想法或解决方案如何做到这一点表示赞赏。
In the code below, the .desaturate class correctly applies the filter attributes and turns bg image into b&w. The other image w/in this section tag are inheriting the desaturate as would be expected, but when I try to "re-saturate" through the img.saturate class it is not being applied. I've whittled down my code to as short/basic as it can get to explain what I am trying to do. Any ideas or solution how this can be done is appreciated.
<html>
<style>
.desaturate {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
/*grayscale for background image*/
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><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>#greyscale");
}
img.saturate {
filter: none !important;
width: 300px;
height: 200px;
-webkit-filter: grayscale(0%) !important;
-moz-filter: grayscale(0%) !important;
-ms-filter: grayscale(0%) !important;
-o-filter: grayscale(0%) !important;
}
</style>
<body>
<section class="desaturate" style="background-image: url('bg-img-1.jpg');">
<div class="row">
<div class="col-md-12">
<img src="img-2.jpg" class="img-responsive saturate" alt="" />
</div>
</div>
</section>
</body>
</html>
推荐答案
饱和度的工作原理与不透明度相同，您可以无法将效果应用于父级，然后在子级中撤消。最好的选择可能是使灰度图像成为该部分的子级，而不是该图像的父级。
Saturation works in the same way as opacity does, you can't apply the effect to a parent and then undo it in a child. Your best option would probably be to make the grayscaled image a child of your section but not a parent of the image:
<section>
<figure class="desaturate" style="background-image: url('bg-img-1.jpg');"></figure>
<div class="row">
<div class="col-md-12">
<img src="img-2.jpg" class="img-responsive saturate" alt="" />
</div>
</div>
</section>
您的另一种选择是在 :: before <中继承背景/ code>或 :: after 伪元素并在其中应用过滤器：
Your other option would be to inherit the background in a ::before or ::after pseudo element and apply the filter there:
.desaturate {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.desaturate:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
/*grayscale for background image*/
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><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>#greyscale");
}
您可以在此处查看演示： http://codepen.io/Godwin/pen/ogLPvR 。
You can see a demo here: http://codepen.io/Godwin/pen/ogLPvR.
编辑：
只是出于兴趣，还有另一种方法，但是它还没有很高的浏览器支持：
Edit: Just for sake of interest, there is another way of doing this but it doesn't have high browser support yet:
.desaturate {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
/*grayscale for background image*/
background-color: #FFF;
background-blend-mode: luminosity, normal;
}
参考： https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
示例： http：// codepen。 io / Godwin / pen / raLZVr
支持： http://caniuse.com/#feat=css-backgroundblendmode
这篇关于CSS仅使Div中的其他图像饱和的背景图像保持饱和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
