在图像上并排应用三个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的原因也是因为当技术上1/3是33.33%(当然重复)时你将它设置为30%.

我在这里做了一个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>