html - 透明度のあるdiv内にcssを使用してpngをスタックします

Question

いくつかの div があり、それぞれにスタックする必要がある 2 つの透明な画像が含まれています。

最初のものを背景として設定してみました。何らかの理由で img が透明ではありません。

次に、div内に画像を積み重ねようとします。しかし、私はまだ透明性の問題を抱えています。

フィドルをチェックしてください：http://jsfiddle.net/Epby4/

<div class="row">
    <div class="span9">
            <div class="ring" id="ring57">
            <a class="images" href="/rings/57/edit">
                 <img src="https://lxproject.s3.amazonaws.com/uploads/band/img/29/thumb_ringblack.png" width="160">
                <img class="cut" src="https://lxproject.s3.amazonaws.com/uploads/cut/img/11/thumb_roundcut.png" width="160" style="background-color : transparent;">
                </a>
            </div>
            <div class="ring" id="ring66">
            <a class="images" href="/rings/66/edit">
                 <img src="https://lxproject.s3.amazonaws.com/uploads/band/img/27/thumb_band_yellow.png" width="160">
                <img class="cut" src="https://lxproject.s3.amazonaws.com/uploads/cut/img/14/thumb_ring4_center.png" width="160" style="background-color : transparent;">
                </a>
            </div>
            <div class="ring" id="ring67">
            <a class="images" href="/rings/67/edit">
                 <img src="https://lxproject.s3.amazonaws.com/uploads/band/img/27/thumb_band_yellow.png" width="160">
                <img class="cut" src="https://lxproject.s3.amazonaws.com/uploads/cut/img/15/thumb_ring5_center.png" width="160" style="background-color : transparent;">
                </a>
            </div>
   </div>
</div>

そしてCSS：

div.ring {
    float: left;
    position: relative;
    border: 1px solid red;
    width:160px;
    height:130px
}
div.ring img {
    position:absolute;
    background: transparent;
}