覆蓋背景圖像不顯示

我想創建圓形圖像（在這種情況下固定寬度，所以我只想使用覆蓋png），但角落覆蓋似乎並沒有顯示出來。覆蓋背景圖像不顯示

的加價是這樣的：

<div class="rounded roundTop"> 
    <div class="rounded roundBottom"> 
     <img /> 
    </div> 
</div> 



.rounded { 
    position: relative; 
    z-index: 99; 
} 

.roundTop{  
    background: transparent url('../@gui/round-img-top-155.png') top left no-repeat; 
} 

.roundBottom{ 
    background: transparent url('../@gui/round-img-bottom-155.png') bottom left no-repeat; 
} 

img { 
    width: 155px; 
    padding-right: 12px; 
    position: relative; 
    z-index: 1;

的.rounded的div似乎是在正確的地方，但他們的背景沒有顯示出來，我不知道，爲什麼！

這裏是一個jsfiddle

我嘗試分配了堅實的背景顏色的div容器和他們的形象去下，儘管他們的z-index。

我可以通過將圖像本身發送到後面來獲取圖像前的邊框，但是它會被頁面中的所有其他元素覆蓋。

來源

2011-06-16 Damon

什麼是空img標籤？據我所見，他們是他們需要的地方。唯一的問題可能是你沒有爲指定任何東西，從而導致它爲空並且可能爲0px高度。編輯：也許這些@gui路徑？從來沒有看到有@符號的路徑。 – robx 2011-06-16 20:41:45

你有活的鏈接嗎？ – thirtydot 2011-06-16 20:44:30

我剛剛拿出了img src，因爲它是一個相對路徑，我目前沒有在線項目。 – Damon 2011-06-16 22:08:56

我假設他們根本沒有出現？我想冒險猜測這是因爲你的網址。我不認爲「@」是在文件名中使用的有效字符（如果是的話，這不是一個好習慣）。

檢查以確保瀏覽器找到該文件的一個好方法是打開瀏覽器的開發人員工具（對於Firefox，您需要安裝Firebug;其他人都是內置的），然後查看CSS視圖。你應該可以點擊或懸停在URL上，看看它是否加載預覽（我知道它適用於Firebug，我認爲它適用於其他的，如果不是，你應該能夠判斷它是否下載了文件在下載視圖中）。

除此之外，一個活的鏈接或jsfiddle會有所幫助。

來源

2011-06-16 20:46:10 Shauna

圖片鏈接即將推出。 @符號對我來說也很奇怪，但它們是我必須使用的CMS的一部分。 – Damon 2011-06-16 22:09:30

這將解決這個問題：

.roundBottom{ 
    padding: 18px 0px; 
    background: transparent url('http://ctrlshiftweb.com/round-img-bottom-155.png') bottom left no-repeat; 
}

你需要考慮到圖像的高度。：D

來源

2011-06-16 22:21:30 kei

這並不涉及圖像背後的疊加層。它的確幫助他們排隊......但我很困惑，爲什麼這是一個問題。我希望圖像與其容器div大小相同。爲什麼需要填充？ – Damon 2011-06-21 20:09:13

你是認真的嗎？你在一個div上放置一個**不透明的**圖像。當然，你不會看到「角落」，因爲它是一個背景圖像。如果你想讓它像你編碼一樣工作，把你的JPG圖像變成透明的PNG圖像。 – kei 2011-06-21 20:15:50

您的圖片代碼改變了（png與透明度）：http://jsfiddle.net/ynzRp/ – kei 2011-06-21 20:17:39

您需要從容器元素中刪除z-index，並在圖像上設置一個負值z-index，see here。

來源

2011-06-16 22:32:54 jeroen

仍然不完全清楚爲什麼這是必要的。如果z-index是專門設置的，不應該包含什麼含義？（我想很清楚它確實是..） – Damon 2011-06-17 04:37:50

因此，我不能將容器元素放置在img頂部，我必須將容器放置在圖像下方？然後將每個其他包含元素（包裝器，內容，帖子等）放在那裏？一定有更好的方法！ – Damon 2011-06-17 05:02:48

@Damon，你不得不將圖像放置在容器的下方，使用圖像的負Z指數和容器的Z指數。只要看看jsfiddle的例子。 – jeroen 2011-06-17 13:31:51

覆蓋背景圖像不顯示

回答

相關問題