Серая часть изображения с CSS

Question

Я пытаюсь серой отрезать изображение (две полосы слева и справа). Есть ли способ сделать это, используя только CSS?

Я знаю, что могу использовать фильтры (т. Е. filter: grayscale(100%)), но я не хочу, чтобы все изображение было серым.

Answer 1

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