用CSS格式化圖像的一部分

Question

我想灰化圖像的一部分（左右兩個條紋）。有沒有辦法只用CSS來做到這一點？

我知道我可以使用過濾器（即filter: grayscale(100%)），但是我不想整個圖像是灰色的。

Answer 1

，沒有額外的標記純CSS解決方案

JSFIDDLE DEMO

HTML

<div class="image-container"> 
    <img class="image-grey" src="http://placekitten.com/200/150" /> 
</div> 

CSS

.image-container { 
    position:relative; 
    display:inline-block; 
} 

.image-grey { 
    display:block; 
    -webkit-filter: grayscale(100%); 
} 

.image-container:after { 
    position:absolute; 
    content:""; 
    top:0; 
    left:50%; 
     width:50%; 
    height:100%; 
    background-image:url(http://placekitten.com/200/150); 
    background-position:top right; 
} 

Answer 2

把一個div放在它上面。

<div id="wrapper"> 
    <img src="path/to/file.jpg" /> 
    <div id="filter"> 
</div> 
<style> 
#wrapper {position: relative;} 
#filter { 
    position: absolute; 
    top: 123px; 
    left: 123px; 
    width: 42px; 
    height: 42px; 
    background: rgba(255,0,0,0.5); 
} 
</style> 

http://jsfiddle.net/BQ7J3/

Answer 3

如果您確實希望使用灰階過濾器，你將需要在彼此的頂部有兩個圖像，一個與灰階過濾器應用，裁剪到你希望的大小。

<div class="image-container"> 
    <img class="image-grey clip" src="http://placekitten.com/200/150" /> 
    <img class="image-coloured" src="http://placekitten.com/200/150" /> 
</div> 

和

.image-coloured { 
    z-index: 0; 
    position: absolute; 
} 

.image-grey { 
    z-index: 1; 
    position: absolute; 
    -webkit-filter: grayscale(100%); 
} 

.clip { 
    clip: rect(0px,60px,150px,0px) 
} 

Fiddle