在图像上并排应用三个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>

Answer 2

在这里你去，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

Answer 3

我看见已经有人回答，但我觉得效果更好，如果你把它负责。对于这样添加下面的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

Answer 4

的另一种方法的情况是使用混合模式来代替滤波器。

这种方式，你有更大的flexibity的时候设置您的布局，（例如，你可以设置图像大小为背景：盖）

你只需要知道的混合模式当量这些过滤器

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