title: half transparent div above image
body: <p>I have a PNG image of a character, and I want something like that:
  <a href="http://www.swfcabin.com/open/1364482220" rel="nofollow noreferrer">http://www.swfcabin.com/open/1364482220</a>.</p>
  
  <p>If someone clicks on a part of the character's body, it'll be "selected".
  The question is - how can I do that. I don't want to use more images (because I have multiple characters), I want to use CSS only.</p>
  
  <p>I tried this: <a href="http://jsfiddle.net/eRVpL/" rel="nofollow noreferrer">http://jsfiddle.net/eRVpL/</a>, but the green background appear above the white background, and I want it to be only above the character.</p>
  
  <p>The code:</p>
  
  <pre><code>&lt;div class="character"&gt;
      &lt;img src="http://img194.imageshack.us/img194/3854/goldgladiator.png" /&gt;
      &lt;span&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;style&gt;
  .character { width: 210px;display: inline-block; vertical-align: middle; position: relative; }
  
  .character &gt; span {
      display: block;
      width: 200px;
      height: 30%;
      background: rgb(160, 255, 97);
      opacity: .3;
      position: absolute;
      top: 0;
  }
  img {
      max-width: 200px;
  }
  &lt;/style&gt;
  </code></pre>