半透明的div上面的图像 [英] half transparent div above image

问题描述

我有一个角色的PNG图像，我想要这样的东西：
http： //www.swfcabin.com/open/1364482220 。

如果有人点击角色身体的一部分，它将被选中。
问题是 - 我该怎么做。我不想使用更多的图像（因为我有超过1个字符），我只想要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;位置：相对; } 
 
 .character> span {
 display：block; 
 width：200px; 
身高：30％; 
 background：rgb（160,255,97）; 
不透明度：.3; 
位置：绝对; 
 top：0; 
} 
 img {
 max-width：200px; 
} 
< / style> 
  

解决方案

您可以使用 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）; 
不透明度：.3; 
位置：绝对; 
 top：0; 
 -webkit-mask-image：url（http://img194.imageshack.us/img194/3854/goldgladiator.png）; 
 
 $ / code> 

如果您想要偏移您链接的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; 
宽度：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的复选框和标签。

I have a PNG image of a character, and I want something like that: http://www.swfcabin.com/open/1364482220.

If someone clicks on part of the character's body, it'll be "selected". The question is - how can I do that. I don't want to use with more images (because that I have more than 1 characters), I want only CSS.

I tried this: http://jsfiddle.net/eRVpL/, but the green background appear above the white background, and I want it to be only above the character!

Thanks, and Sorry for my English =\

the code:

<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>

解决方案

You can make this work with CSS masks, although they are currently only supported in WebKit browsers: 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);
}

If you want to offset the elements like in the GIF you linked, put the colored background on children of the masked 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);
}

And this one's just for fun: http://jsfiddle.net/eRVpL/23/ Try clicking the character. It uses checkboxes and labels with no JavaScript.

这篇关于半透明的div上面的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！