3

我有一个字符的 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>
4

3 回答 3

1

目前没有实现这一点的纯 CSS 方法。有一个用于合成和混合 CSS 的规范正在制定中，但目前它还没有得到足够的支持，无法在产品中使用。您可以在此处阅读规范：http: //www.w3.org/TR/compositing/

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

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

祝你好运！

于 2013-03-28T18:25:02.020 回答
1

您可以使用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 的复选框和标签。

于 2013-03-28T18:37:43.333 回答
-1

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

于 2013-03-28T17:10:53.443 回答