PNG图像的透明度与CSS背景属性重叠

Question

PNG图像是侧边栏，黑色部分是CSS背景，PNG的alpha似乎覆盖了黑框。

当我更改图像的不透明度时，您可以看到该框继续穿过整个图像，但仍然被覆盖，我仔细检查了侧边栏的透明度，但它已正确设置。

它可以在Google Chrome和Firefox上实现。

相关CSS：

.sidebar{
    background: url('side1.png') lightgray 10% 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 600px;
    width: 173px;
    z-index:1;
    float:left;
    position:relative;
    opacity:0.5;
}

.header{
    background: black;
    background-position: top right;
    float:right;
    width:100%;
    height: 200px;
    z-index:0;
    position:absolute;
}

相关HTML：

<div class="sidebar">
    <img src="images/pic1.png" class="icon">
</div>

<div class="header"></div>

Answer 1

这似乎只是一个简单的案例，即分裂回到浮动内容的后面。大多数人都没有意识到，仅仅因为那里有浮动的内容，的分支仍然会一直向后扩展一直到边缘，就像通常情况下浮动的内容一样那里。

该部门正在占据其预期的最大可用空间量。浮动的内容只是推送内容，在这一点上，没有任何内容。使侧边栏部分不透明，此问题变得可见，因为您现在可以在图像后面看到该框。每个人说，一个快速解决方法是为分区增加一个余量，将其从侧边栏后面推出，如下所示：

.header {
    margin-left: 173px; /* The width of your sidebar */
}

但请注意，您必须将此边距应用于需要从下方推出的所有块级元素的左侧。因此，将所有正确的内容放入一个被推出的盒子中是有意义的，以防止混淆。

---

编辑：您的黑色背景未在侧边栏图片上显示的原因是您在此处将背景设置为浅灰色：

background: url('side1.png') lightgray 10% 50%;

这将在图像后面放置浅灰色背景，而不是让图像的透明部分通过它背后的任何内容。尝试删除它：

background: url('side1.png') 10% 50%;

请参阅jsFiddle example。