半透明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>

Answer 1

目前还没有完成此任务的CSS方法。 有一个与CSS合成和混合的规范正在开发中，但它目前尚不足以支持在产品中使用。 您可以在此处阅读规范： http ： //www.w3.org/TR/compositing/

使用此规范，我们可以将元素的混合模式设置为“屏幕”，“叠加”或“变亮”，这将使您的角色变为绿色，但背景将保持白色。 不幸的是，这还不可能。

最好的方法是，正如jcubic在你的一条评论中所说，“你需要使用一个掩模，图像将完全相同但角色透明”。

祝好运！

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的复选框和标签。

Answer 3

尝试使用z-index来获得你想要的东西。 您可以使对象看起来隐藏在某个页面上，直到您通过鼠标单击或悬停来启动它。 你也可以制作一个基本上是轮廓的绿色图像并将其分成三个不同的部分，给它们一点点精确定位（每个都有自己的分区）并有一个小的z-index，然后你就得到了自己的。 您可能还希望将实际角色分为三个部分以使其更容易。