如何在图片顶部放置一个div叠加层，颜色为“灰色”？

Question

是否可以在带有颜色的图片上方放置一个“叠加”div，从而使叠加层覆盖的图片部分变灰？

我知道有-webkit-filter属性，但这似乎只会使属性适用的整个图像变灰。

在图片顶部放置灰色div似乎也不起作用，因为图像中的某些颜色似乎仍然显示出来！

现在，我能想到的唯一解决方案是在原始图像的顶部覆盖完全相同的图像，并在其上添加-webkit-filter属性。

先谢谢。

编辑：

对不起，这可能不是很好，但希望能说明我想要的东西：

这是原始图片。注意颜色：

在原始图像顶部叠加后，图案仍显示，但现在该部分完全没有红色：

Answer 1

使用css和html没有很好的解决方案。如果我绝对必须这样做，我只需将图像带入photoshop并手动添加灰色区域。我不认为半透明div叠加也是一个糟糕的选择，但你提到不是你想要的。

有时你必须妥协设计或以不理想的方式做事（即photoshop图像）。希望有人可以提供更好的选择，但我不认为有一个。

Answer 2

上覆的div灰色但不透明度小于1应达到预期的效果（除非我被误解）。例如，请参阅Example 3 here。

Answer 3

我抓住了这个。检查小提琴： http://jsfiddle.net/9yVuA/

基本上，如果你使用包含元素，你可以达到适合我看到你的请求的效果：

<div id="test">
    <div id="overlay"></div>
    <img id="image" src="http://i.stack.imgur.com/ncoqL.png">
</div>

和css ......

#test{
    width:400px;
    height:400px;
    overflow:hidden;
    position:relative;
    padding:0;
    margin:0;
}

#overlay{
    width:400px;
    height:400px;
    background:url(http://i.stack.imgur.com/ncoqL.png) fixed;
    position:absolute;
    top:-400px;
    left:0px;
    z-index:100;
    -webkit-transition:.2s linear;
    transition:.2s linear;    
    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

#test:hover #overlay{
    top:-200px;
    -webkit-transition:.2s linear;
    transition:.2s linear;
}

您可能需要为跨浏览器支持添加额外的转换支持。我只是很快把它放在一起，所以我可能遗漏了一些东西。对齐有点偏，等等，但它证明只用css和html就可以了。

Answer 4

我希望z-index属性可以帮到你。

请查看Fiddle以获取一个简单示例。

对于你的叠加div，你必须指定

z-index:999;

这将隐藏图像部分。希望这会对你有所帮助。