javascript - 在图像上并排应用三个 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 实现这一点？

现在，即使是三分之一的部分也没有被棕褐色正确覆盖。

Answer 1

编辑:我看到有人已经发布了答案，但我只发布我的答案，因为我做的有点不同。

如果你想正确地划分它们，你需要将它分成不同的元素用于每个过滤器。您还需要让每个元素都有自己的背景设置，以便过滤器可以应用于其自己的图像部分，并且您需要相应地设置位置(您不必担心请求，因为它会只请求一次背景图片)。

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

我做了一个codepen here .

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