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