html - 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

这似乎只是在 float 内容后面进行除法的一个简单案例。大多数人没有意识到，仅仅因为那里有 float 内容，分区仍然向后扩展一直到边缘，就像没有 float 内容时的正常情况一样 那里。

该部门也像预期的那样占用了最大可用空间。 float 内容只是推送内容，此时还没有。使您的侧边栏部分不透明，这个问题变得明显，因为您现在可以看到图像后面的那个框。比如说，一个快速的解决方法是为分区添加一个边距，以将其从侧边栏后面推出，如下所示:

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

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

---

编辑:您的黑色背景没有在侧边栏图像上显示的原因是您在此处将其背景设置为浅灰色:

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

这会在图像后面放置一个浅灰色背景，而不是让图像的透明部分穿过它后面的任何部分。尝试删除它:

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

参见 jsFiddle example .