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 masks进行此操作，但目前仅在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，然后你就得到了自己的。您可能还希望将实际角色分为三个部分，以便更轻松。

半透明div高于图像

3 个答案: