title: How can I make a mask with cross-browser support?
body: <p>I know how to do a mask in css, but only chrome and safari support this.
  Is there any replacement for this?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="character"&gt;
      &lt;img src="http://img194.imageshack.us/img194/3854/goldgladiator.png"&gt;
      &lt;div class="green-mask"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;style&gt;
  .green-mask {
      display: block;
      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);
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>I want to make it cross-browser supported.</p>