在圖像上並排應用三個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>