半透明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，然后你就得到了自己的。 您可能還希望將實際角色分為三個部分以使其更容易。