將HTML內容下推到固定背景圖片下方

Question

我的頁面以此開始（在<body>標記之后的第一件事）：

<div id="wallpaper" style="width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1;">
    <img src="images/black-matte-1650-Lit-Etched.jpg" style="width: 100%; height: 100%;" alt="">
</div>

在兼容視圖模式下，此功能在除IE之外的所有瀏覽器上均可正常運行。 甚至大多數IE版本都可以正確顯示此內容，但前提是不能在“兼容視圖”模式下顯示。

內容應該“懸停”在背景圖像上，以便隨着頁面滾動，內容也滾動，但是背景保持靜止。 而是將頁面的其余內容下推到背景圖像的底部，然后從那里進行渲染。 因此，我的頁面看起來只是背景圖像，而您必須向下滾動才能看到其下面的頁面內容。

誰能解釋出什么問題了，以及如何解決這個問題？

Answer 1

如果您只想要固定的背景圖像，則不會使用div。 試試這個...

CSS：

body{
    background:url(images/black-matte-1650-Lit-Etched.jpg) top right no-repeat; background-attachment:fixed; 
}

然后從HTML刪除牆紙div和圖像。

編輯：如果該div需要與頁面其余部分不同的背景，也可以將該CSS應用於div：

div#wallpaper{
    background:url(images/black-matte-1650-Lit-Etched.jpg) top right no-repeat; background-attachment:fixed; 
}

將HTML內容下推到固定背景圖片下方

問題描述

1 個解決方案

解決方案1
2 已采納 2015-03-25 20:14:17

將HTML內容下推到固定背景圖片下方

問題描述

1 個解決方案

解決方案1 2 已采納 2015-03-25 20:14:17

解決方案1
2 已采納 2015-03-25 20:14:17