圖片和HTML

backimage問題，我有一個具有ocean.png充滿整個屏幕圖片和HTML

body { 
background: url('ocean.png'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: center; 
background-size: 100%; 

    }

然後我想要加載最重要的是另一圖像的身體。

<body> 
     <img src="image/bubble/bub0.png" name="bubble" width="100" height="100" alt="bub">

但圖像bub0，而不是已經Z變得比機身背面圖像更高，它顯示在左上角的白色空間的最頂端部分和整個海洋的背景圖像得到了下移。我希望bub0圖像疊加在海洋背景圖像上並具有更高的z順序。

來源

2012-02-09 lilzz

背景圖像總是在底部，因爲它是背景而不是元素。也許我不明白你想要什麼。你有一個例子頁面或任何東西或一些截圖？ – Nathan 2012-02-09 21:08:05

你需要給它一個position: fixed;以及

img[name="bubble"] { 
    position : fixed; 
    top  : 0; 
    left  : 0; 
    z-index : 2; 
}

來源

2012-02-09 21:07:28 Maverick

好的，如果泡泡圖像放在最下面的中間怎麼辦？ – lilzz 2012-02-09 21:15:18

只需更新'top'和'left' px值即可。 – Maverick 2012-02-09 23:26:55

背景圖片將始終在底部不管。 z-index與該問題無關。

所有瀏覽器都不支持Background-size屬性，因此它不會像您期望的那樣達到100％。 IE9 +，Firefox 4 +，Opera，Chrome和Safari 5+支持background-size屬性。

我認爲圖像ocean.png居中，它並沒有真正覆蓋整個頁面，讓你感覺像圖像被降低，而不是在後臺。

來源

2012-02-09 21:10:03

回答

相關問題