在图像上同时应用三个CSS滤镜？

Question

请看下面的CodePen演示：http://codepen.io/anon/pen/vLPGpZ 以下是我的代码：

  body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(http://lorempixel.com/900/300) no-repeat center center fixed;
  }

  body:before {
    left: 0;
    right: 0;
    content: "";
    position: fixed;
    height: 100%;
    width: 30%;
    background: url(http://lorempixel.com/900/300) no-repeat center center fixed;
    filter: sepia(1);
  }

您将会看到应用了一个棕褐色滤镜。我的目标是在同一图像上并排应用三个CSS过滤器。第一个1/3部分使用灰度过滤器，中间的1/3部分使用棕褐色过滤器，最后1/3部分使用对比度过滤器。我如何使用jQuery或JavaScript来实现这个目标？当前，甚至1/3部分的Sepia效果也没有正确地覆盖整个部分。

- SanJeet Singh

Answer 1

编辑：我看到有人已经发布了答案，但我会发表我的答案，因为我做了一些不同的事情。

如果您想要正确分段，您需要将其拆分为每个过滤器的不同元素。您还需要使每个元素具有自己的背景设置，以便该过滤器可以应用于其自身图像的部分，并且您需要相应地设置位置（您无需担心请求，因为它只会请求一次背景图像）。

此外，您的第一个部分不是1/3的原因在于您将其设置为30％，而1/3在技术上是33.33％（当然是重复的）。

我在这里创建了一个CodePen。

.container {
   position: relative;
   width: 900px;
   height: 300px;
}

.filter-section {
  float: left;
  width: 33.333333333%;
  height: 100%;
  background: url(http://lorempixel.com/900/300) no-repeat;
}
    

.grayscale {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  background-position: left;
}

.sepia {
  -webkit-filter: sepia(1);
  filter: sepia(1);
  background-position: center;
}

.contrast {
  -webkit-filter: contrast(200%);
  filter: contrast(200%);
  background-position: right;
}

<div class="container">
  <div class="grayscale filter-section"></div>
  <div class="sepia filter-section"></div>
  <div class="contrast filter-section"></div>
</div>

- aug

Answer 2

另一种方法是使用混合模式而不是滤镜。

这样，您在设置布局时拥有更大的灵活性（例如，可以将图像设置为具有大小：cover的背景）

您只需要了解这些滤镜的混合模式等效即可

.base {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 600px;
  height: 300px;
  background-image: url(http://lorempixel.com/400/200);
  background-size: cover;
}

.filter {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 600px;
  height: 300px;
}

.filter div {
  width: calc(100% / 3);
  height: 100%;
  position: absolute;
  top: 0px;
}

.gray {
  background-color: gray;
  mix-blend-mode: color;
  left: 0px;
}

.sepia {
  background-color: rgb(112, 66, 20);
  mix-blend-mode: color;
  left: calc(100% / 3);
}

.contrast {
  background-color: hsl(128,100%,50%);
  mix-blend-mode: saturation;
  left: calc(200% / 3);
}

<div class="base"></div>
<div class="filter">
<div class="gray"></div>
<div class="sepia"></div>
<div class="contrast"></div>
</div>

- vals

---

非常酷！尽管混合模式的浏览器支持并不是很好，但仍然非常酷。 - aug

谢谢！我希望它得到更多的支持，这将会允许很多炫酷的效果。 - vals

Answer 3

这是您需要的，JSFiddle

。

    body {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: url(http://lorempixel.com/900/300) no-repeat center center fixed;
      -webkit-filter: contrast(1);
      filter: contrast(1);
    }

body:before {
    right: 0;
    top: 0;
    content: "";
    position: fixed;
    height: 100%;
    width: 33%;
    background: url(http://lorempixel.com/900/300) no-repeat right center fixed;
    -webkit-filter: sepia(1);
    filter: sepia(1);
}

body:after {
    left: 0;
    top: 0;
    content: "";
    position: fixed;
    height: 100%;
    width: 33%;
    background: url(http://lorempixel.com/900/300) no-repeat left center fixed;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

或者这种带有重复背景的宽度：

JSFiddle

- Pedram

---

有没有办法应用超过三个过滤器？ - SanJeet Singh

在这种情况下，我必须说“不”，在这个例子中，我使用了伪元素，它只为每个元素添加了两个额外的元素，“after”和“before”，但是你可以忘记这种方法，例如，在你的“body”中使用6个“div”并给它们添加过滤器。 - Pedram

我不得不接受其他答案，因为那是可扩展的 :)。 - SanJeet Singh

Answer 4

我看到有人已经回复了，但是我认为如果你使其响应式效果会更好。要做到这一点，请添加以下HTML代码：

<div class="container">
  <div class="wrapper grayscale">
    <div class="picture"></div>
  </div>
  <div class="wrapper original">
    <div class="picture"></div>
  </div>
  <div class="wrapper sepia">
    <div class="picture"></div>
  </div>
</div>

还有CSS

.container {
  height: 300px;
  max-width: 900px;
  margin: 100px 0 0 0;
  position: relative;
  width: 100%;

}

.wrapper {
  height: 300px;
  float: left;
  max-width: 900px;
  overflow: hidden;
  position: relative;
  width: 33.3%;
}

.picture {
  background-image: url(http://lorempixel.com/900/300);
  background-repeat: no-repeat;
  background-size: 900px;
  background-position: left 100px;
  background-attachment: fixed;
  height: 300px;
  left: 0;
  position: absolute;
  top: 0;
  width: 900px;
}

.grayscale .picture {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

.picture.original {
}

.sepia .picture {
  -webkit-filter: sepia(1);
  filter: sepia(1);
} 

主要的技巧是使用CSS属性使背景固定。

background-attachment: fixed;

请看这个例子：http://codepen.io/guilhermelucio/pen/obVLpd。

- Guilherme Lúcio