半透明的DIV覆盖在图片上方

Question

我有一个角色的PNG图片，我想要像这个网站一样的效果：http://www.swfcabin.com/open/1364482220。

当某人点击角色身体的一部分时，该部位将被“选中”。问题是 - 我该如何实现。我不想使用更多的图像（因为我有多个角色），我只想使用CSS。

我尝试了这个：http://jsfiddle.net/eRVpL/，但绿色背景出现在白色背景上方，而我希望它仅出现在角色上方。

代码如下：

<div class="character">
    <img src="http://img194.imageshack.us/img194/3854/goldgladiator.png" />
    <span></span>
</div>
<style>
.character { width: 210px;display: inline-block; vertical-align: middle; position: relative; }

.character > span {
    display: block;
    width: 200px;
    height: 30%;
    background: rgb(160, 255, 97);
    opacity: .3;
    position: absolute;
    top: 0;
}
img {
    max-width: 200px;
}
</style>

- HTMHell

---

你需要使用一张蒙版图片，确保它与原图完全相同，只是把人物设为透明。 - jcubic

有没有其他方法，不需要使用图片？我有很多字符... - HTMHell

你可以尝试使用canvas元素并使用javascript创建遮罩。或者使用php生成遮罩。如果背景只有一种颜色，那么你需要做的就是将不是背景的部分变为透明。 - jcubic

背景不只是一种颜色...而且我如何在画布上实现它？ - HTMHell

Answer 1

目前还没有一种纯CSS的方法来实现这个。有一个关于使用CSS进行合成和混合的规范正在制定中，但目前还不足以用于产品。您可以在这里阅读该规范: http://www.w3.org/TR/compositing/ 通过这个规范，我们可以将您的元素的混合模式设置为“屏幕”、“叠加”或“变亮”，这将使您的字符变为绿色，但背景仍将保持白色。不幸的是，目前还不可能实现这一点。

最好的方法是，正如jcubic在您的评论中所说，“您需要使用一个掩码，即完全相同但字符透明的图像”。

祝你好运！

- Graham Robertson

---

这个不能用JS或其他什么方式实现吗？ - HTMHell

Answer 2

你可以使用CSS遮罩来实现这个功能，尽管它们目前只在Webkit浏览器中支持：http://caniuse.com/#feat=css-masks。

http://jsfiddle.net/eRVpL/3/

HTML：

<div class="character">
  <img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
  <div class="green-mask"></div>
</div>

CSS:

.green-mask {
  height: 200px;
  width: 508px;
  background: rgb(160, 255, 97);
  opacity: .3;
  position: absolute;
  top: 0;
  -webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}

如果您想要像您链接的GIF一样偏移元素，请将有颜色的背景放在被遮罩的div的子元素上：

http://jsfiddle.net/eRVpL/11/

HTML：

<div class="character">
  <img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
  <div class="green-mask">
    <div class="filler"></div>
  </div>
</div>

CSS：

.filler {
  background-color: rgba(160, 255, 97, 0.3);
  height: 200px;
  margin-top: 200px;
  width: 100%;
}

.green-mask {
  position: absolute;
  width: 508px;
  top: 0;
  -webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}

这只是为了好玩: http://jsfiddle.net/eRVpL/23/ 尝试点击角色。它使用复选框和标签而没有JavaScript。

- Ross Allen

---

非常感谢！我刚写了一条评论询问当绿色块位于中间时该怎么办，然后我注意到你已经更新了...哈哈，你读懂了我的想法... 再次感谢，对我的英语不好很抱歉。 - HTMHell

@ArielAharonson 当然，这是一个有趣的问题。请记住，CSS遮罩需要像您在原始帖子中使用的字符图像一样具有alpha透明度的PNG格式图片。遮罩将元素剪切到PNG中非透明像素。 - Ross Allen

@ArielAharonson 我不确定你是否会收到关于编辑的更新，但是看看这个：http://jsfiddle.net/eRVpL/23/ - Ross Allen

谢谢！！！你太棒了！最后一个请求，如果可以的话，我希望它像我给出的SWF一样，如果你按腿，胃也会被选中。如果你按胃，肩膀也会被选中，如果你按肩膀，头部也会被选中，如果你选择头部，腿部也会被选中。非常感谢！ - HTMHell

@ArielAharonson 这在 JavaScript 中应该很容易实现。我之前做 JS-free 版本主要是为了展示它是可行的。 - Ross Allen

Answer 3

尝试使用z-index来实现您想要的效果。您可以使对象在某个页面上看起来隐藏，直到您通过鼠标单击或悬停将其提升。您还可以制作一个基本上是剪影的绿色图像，并将其分成三个不同的部分，为它们各自的区域设定精确的位置（每个都有自己的划分）并设置一小段z-index，然后您就得到了这个效果。您还可以将实际字符分成三个部分，以便更容易操作。

- Max

---

这不是我的问题的解决方案。我有很多字符，所以如果我使用你的解决方案，我将不得不为每个字符制作三个图像，这是很多工作量。我的问题是绿色背景出现在白色背景上方，而我希望它只出现在字符上方。 - HTMHell