Question

我有几个div，每个div包含2个应该堆叠的透明图像。

我尝试将第一个设置为背景。出于某种原因，img不透明。

然后我尝试将图像堆叠在div中。但我仍然有透明度问题。

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

Answer 1

您的png不透明。他们有白色背景。

它们也已损坏，无法在photoshop中打开。

我怀疑你确实将它们保存为jpeg，但文件扩展名为png

在具有透明度的div内使用css堆栈png

1 个答案: