Example Fiddle

Question

我正在尝试对div的背景图像进行去饱和处理，同时让图像在同一个div中保持饱和状态。我找到了一个接近我试图做的例子（除了w /模糊），但尝试了多种变体而没有成功。

在下面的代码中，.desaturate类正确应用过滤器属性并将bg图像转换为b＆amp; w。这部分标签中的另一张图片正如预期的那样继承了饱和度，但是当我尝试重新饱和时＃34;通过img.saturate类它没有被应用。我已经将我的代码缩减为短/基本，因为它可以解释我想要做什么。任何想法或解决方案如何做到这一点是值得赞赏的。

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

Answer 1

饱和度的工作方式与不透明度相同，您不能将效果应用于父级，然后在子级中撤消它。您最好的选择可能是使灰度图像成为您的部分的子图像而不是图像的父图像：

<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或::after伪元素中的背景并在那里应用过滤器：

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

修改：只是为了感兴趣，还有另一种方法可以做到这一点，但它还没有很高的浏览器支持：

.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

Answer 2

让您的背景图片变成孩子

将背景图像作为孩子，然后可以在元素上应用filter。

filter: grayscale(60%);
-webkit-filter: grayscale(60%);
-moz-filter: grayscale(60%);
-ms-filter: grayscale(60%);
-o-filter: grayscale(60%);

或者，保持HTML结构，但仅定位背景图片...

关于背景图像，滤镜不可用，但是您可以使用background-blend-mode的此技巧来获得相同的饱和度效果。

通常background-blend-mode是开或关（即您无法定义百分比），但是通过以下技巧，您实际上可以得到可变的饱和度：

background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url(image.jpg);
background-blend-mode: saturation;

这将使用background-blend-mode仅在背景图像上给您60％的去饱和度。关键是使用线性渐变，并在颜色上设置不透明度。我似乎无法使用渐变（即具有不透明度的纯色）复制相同的效果 not 。

浏览器支持：

filter和background-blend-mode在IE / Edge中的支持都较弱，因此可能为那些浏览器使用单独的CSS规则（如大量其他文章所述）。

Answer 3

这是你的修复：

Example Fiddle

所以，基本上，你的CSS搞砸了很糟糕。你的分号之后的悬空!important修饰符和之后随意包含的分号没有帮助。

CSS更改

.desaturate {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

}

.desaturate img {
  /*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");
}



.desaturate img.saturate {
  filter: none !important;
  width: 300px;
  height: 200px;
  -webkit-filter: grayscale(0%);
  -moz-filter:    grayscale(0%);
  -ms-filter:     grayscale(0%);
  -o-filter:      grayscale(0%);
}

您无法将过滤器应用于整个div，然后在子元素上覆盖它（在本例中为img。所以我们首先将过滤器应用于img ，然后使用saturate类覆盖它。

瞧。

CSS去饱和背景图像只有其他图像在Div Stay饱和

3 个答案:

Example Fiddle