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示例 。