6

我正在尝试使图像的一部分变灰（左右两条条纹）。有没有办法只使用 CSS 来做到这一点？

我知道我可以使用过滤器（即filter: grayscale(100%)），但我不希望整个图像都是灰色的。

4

3 回答 3

9

没有额外标记的纯 CSS 解决方案

JSFIDDLE 演示

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;
}
于 2013-10-25T21:53:09.087 回答
2

如果您确实希望使用灰度滤镜，则需要将两张图像叠放在一起，其中一张应用了灰度滤镜并裁剪为您想要的大小。

<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)
}

小提琴

于 2013-10-25T21:37:21.590 回答
2

Put a div over it.

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

于 2013-10-25T21:21:41.880 回答