css - 使用 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;
}