PNG圖像的透明度重疊的CSS背景屬性

PNG圖像是側邊欄，而黑色部分是CSS背景下，PNG的alpha似乎覆蓋黑盒子。PNG圖像的透明度重疊的CSS背景屬性

enter image description here

當我改變圖像的不透明度，你可以看到箱子繼續通過整個圖像，但仍然無效，我反覆檢查側邊欄的透明度，但它的設置正確。

enter image description here

它這樣做是在谷歌瀏覽器，以及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>

來源

2012-02-08 Jacob Hacker

我的傾向是，它有實際上是如何創建的PNG做。你是如何創建這個PNG的？在Photoshop中？如果是這樣，你是否保存爲PNG-8或PNG-24？ – chipcullen 2012-02-08 21:53:51

問題是？ – 2012-02-08 21:54:04

**什麼是實際圖片？**您能否將我們鏈接到實際文件pic1.png？沒有它，我們所能做的只是猜測。 – animuson 2012-02-08 22:03:29

這似乎是分裂回去浮動內容後面的只是一個簡單的例子。大多數人沒有意識到，只是因爲那裏是浮動的內容有，師還是擴展回到它後面一路邊緣，像通常那樣，如果浮動內容不那裏。

該部門佔用了其最大的可用空間量就像是期望太高。浮動的內容只是推送內容，在這一點上，沒有任何內容。讓你的側邊欄部分不透明，這個問題就變得可見，因爲你現在可以看到圖像背後的那個框。速戰速決，每說，將保證金添加到師在側欄後面推了，就像這樣：

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

但是請注意，你將不得不這種保證金適用於左所有需要從底層推出的塊級元素。因此，這將是有意義的把所有的權利的內容放到這個被推出，以防止混淆一個盒子。

編輯：你的黑色背景不通過邊欄圖像上拉的原因是，你設置它的背景爲淺灰色的位置：

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

這將會把一個光圖像背後的灰色背景，而不是讓你的形象的透明部分經歷到任何它背後。嘗試刪除它：

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

查看jsFiddle example。

來源

2012-02-08 22:23:55 animuson

對不起，我不想清楚，但我希望它可以放在我身邊吧。 – 2012-02-08 23:23:05

@Hethrir：你到底想要什麼？ – animuson 2012-02-08 23:32:48

黑盒子應該放在側邊欄後面，但它應該在側邊欄的曲線下可見。 – 2012-02-10 17:28:04

PNG圖像的透明度重疊的CSS背景屬性

回答

相關問題