在图像上并排应用三个CSS过滤器?

Have a look at the following CodePen demo: http://codepen.io/anon/pen/vLPGpZ

看看下面的代码页演示:http://codepen.io/anon/pen/vLPGpZ

This is my code there:

这是我的代码:

  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);
  }

You will see a sepia filter applied. What I want is to apply three CSS filters on same image side by side. First 1/3 part with grayscale filter, middle 1/3 part with sepia filter, last 1/3 part with contrast filter. How can I achieve this with or with jQuery or JavaScript?

您将看到应用了一个深褐色过滤器。我想要的是在相同的图像上并排应用三个CSS过滤器。前1/3部分用灰度过滤器，中间1/3用深褐色过滤器，最后1/3部分用对比度过滤器。如何使用jQuery或JavaScript实现这一点?

Right now, even the one third part is not being covered correctly with Sepia.

现在，即使是第三部分也没有被正确地覆盖。

4 个解决方案

#1

EDIT: I see someone posted an answer already but I'll just post mine since I did it a little differently.

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

If you want to have them sectioned off correctly, you are going to need to split it up into different elements for each filter. You'll also need to have each element have its own background set so the filter can apply to its own section of the image and you'll need to set the position accordingly (you don't have to worry about requests because it'll only request the background image once).

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

Also the reason in yours the first section wasn't 1/3 is because you set it to 30% when 1/3 is technically 33.33% (repeating of course).

你的第一部分不是1/3的原因是因为你把它设为30%而1/3在技术上是33.33%(当然是重复)。

I made a 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>

#2

Here you go, JSFiddle

在这里你去,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);
}

or this width repeated background:

或者这个宽度重复的背景:

JSFiddle

JSFiddle

#3

An alternate way to this is to use blend mode instead of filters.

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

This way, you have greater flexibity at the time to set your layout, (for instance, you can set the image as a background with size: cover)

这样，您在设置布局时就有了更大的灵活性(例如，您可以将图像设置为具有size: cover的背景)

You only need to know the blend mode equivalents of those filters

你只需要知道混合模式对应的过滤器

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

#4

I saw someone already replied, but I think the effect is better if you make it responsible. For doing this add the following HTML

我看到有人已经回复了，但我认为如果你让它负责，效果会更好。为此，添加以下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>

And the CSS

和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);
}

The main trick is to use a css property to make the background fixed.

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

background-attachment: fixed;

Please, take a look at the example: http://codepen.io/guilhermelucio/pen/obVLpd

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

#1