在具有透明度的 div 中使用 css 堆叠 png答案

【问题标题】：Stack png's with css inside a div with transparency在具有透明度的 div 中使用 css 堆叠 png
【发布时间】：2013-11-11 09:56:09
【问题描述】：

我有几个 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;
}

【问题讨论】：

标签： html css png transparency

【解决方案1】：

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

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

我怀疑您实际上将它们保存为 jpeg，但文件扩展名为 png

【讨论】：

好的，非常感谢 :-) 对此真的很抱歉，但你是对的。这些是拇指版本，由于某种原因，bg 不透明。实际上，该代码适用于原始（大）图像。再次感谢！