使用 CSS 将图像的一部分变灰答案

【问题标题】：Gray out a section of an image with CSS使用 CSS 将图像的一部分变灰
【发布时间】：2014-02-06 14:02:53
【问题描述】：

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

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

【问题讨论】：

标签： css image filter

【解决方案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;
}

【讨论】：

这正是我想要的。
我看到最终效果时发表了评论，但这并不是我所需要的（它只是一半）。我需要在图像中添加两条灰色条纹，而不仅仅是一条。我正在用这种技术尝试不同的东西，但我找不到在右侧添加另一个灰色条纹的方法。也许我想做的事情需要用 javascript 或其他东西来完成。
现在正式成为我想要的。
如果你想使用background-size: cover;，这个例子是行不通的。但我forked the fiddle 所以它也能做到！

【解决方案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/

【讨论】：

+1 我正在为此制作一个 JSFiddle（只有我使用 PlaceCage :) jsfiddle.net/jM7S6
当然，这并没有使图像变灰，而是使那里的颜色变暗。 jsfiddle.net/W4tY6 。但是，它可能就足够了。
它看起来像我想要的，但不完全是。背景 alpha 属性对我不起作用。不过很酷的把戏。
过滤器和半透明背景之间并没有太大区别。如果您不想变暗，请使用#fff 之类的。
魔杖变暗！可怕！

【解决方案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

【讨论】：

OP：“有没有办法只使用 CSS 来做到这一点？”
是的，但我不明白你为什么要向我指出这个？
你不只使用 css。您需要另一张图片。
任何解决方案都可能需要一些附加标记，就像您的提案一样 - 特别是因为 OP 没有发布图像的上下文:)