我有几个 div，每个包含 2 个应该堆叠的透明图像。
我试过将第一个设置为背景。由于某种原因，img 不透明。
然后我尝试将图像堆叠在 div 中。但我仍然有透明度问题。
检查 fiddle :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;
}
最佳答案
您的 png 不是透明的。它们有白色背景。
它们也已损坏，无法在 photoshop 中打开。
我怀疑你实际上将它们保存为 jpeg 但带有 png 文件扩展名
关于html - 将 png 与 css 堆叠在具有透明度的 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19705757/