背景附件：修復了在jQuery mobilephonegap中不起作用的問題

Question

如何設置不隨內容滾動的背景圖像。 我正在使用jquery mobile和phonegap。 我嘗試使用背景附件：已修復，但圖像無法全屏顯示。

<div data-role="page" class="background">
</div>

我的CSS：

.background {
background-image: url(../images/bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment:scroll;
background-size: 100% 100%;
}

Answer 1

我必須解決這個問題，解決方法（據我所知，它在iOS7中沒有更改）是創建一個單獨的div（將其稱為“背景” div），將其位置設置為fixed，然后插入所需的此div內的背景圖片。

設置該div的z-index，使其位於您其余內容的下方。

iOS Webview將尊重固定位置的div，但不重視background-attachment: fixed;

在html文件的<body>內但在后續頁面外設置一次背景。

這是我的操作方式，而且效果很好。

<div class="background"><img src="img/Background_Dark.png" width="100%"/></div>

和CSS

.background {
    position: fixed;
    top: 0%;
    left: 0%;
    min-width: 100%;
    z-index: -10000;
}

Answer 2

首先，您需要刪除一半的CSS。 從此開始：

.background {
  background-image: url(../images/bg.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

注意，我更改了background-attachment: scroll; background-attachment: fixed; 。 background-attachment的默認值為滾動，因此無論如何都不需要包含它，但這與您嘗試執行的操作相反。

其次，您可以將bg.png上傳到imgur或其他網站，以便我們為您提供一個更好的例子嗎？ 還要在div中填充一些與您的實際內容長度相似的示例內容？ 由於這是一個div而不是網站的主體 ，因此div會折疊起來， 除非在內部包含內容 ，並且div會增長以填充內容。

這意味着如果您設置背景尺寸：100％100％; 您將拉伸圖像直到 div 的內容 ； 這不是你想要的。 您只希望背景圖像填充視口。 設置background-attachment: fixed; 完成此任務。

Answer 3

您可以使用iscroll插件。 由Java腳本源代碼執行的jquery mobile中的頁面以及在css更改的某些元素不起作用。

背景附件：修復了在jQuery mobilephonegap中不起作用的問題

問題描述

3 個解決方案

解決方案1
4 2014-03-25 15:57:34

解決方案2
0 2014-03-05 14:44:36

解決方案3
0 2016-04-17 19:25:24

背景附件：修復了在jQuery mobilephonegap中不起作用的問題

問題描述

3 個解決方案

解決方案1 4 2014-03-25 15:57:34

解決方案2 0 2014-03-05 14:44:36

解決方案3 0 2016-04-17 19:25:24

解決方案1
4 2014-03-25 15:57:34

解決方案2
0 2014-03-05 14:44:36

解決方案3
0 2016-04-17 19:25:24