我如何設置固定的位置jquery mobile iPhone應用程序使用Phonegap的背景圖像

我正在做一個iPhone應用程序使用Phonegap &也使用jQuery的手機。我想爲data-role = page div設置背景圖片。在這個頁面的高度等於屏幕&，因此背景設置爲屏幕大小。但頁面內容長度比屏幕&大得多，因此在圖像完成後看到灰色背景。我的問題是，是否有辦法讓我們可以保持背景圖像固定&滾動或只移動頁面內容&而不是背景圖像。只是提及我已經嘗試full size background jquery pluggin。它在Android上工作，但不在iOS上。我如何設置固定的位置jquery mobile iPhone應用程序使用Phonegap的背景圖像

任何人都可以請幫忙嗎？提前致謝。

來源

2012-01-19 Sayali

好的，所以我做的是在頁面的body元素中創建一個固定的元素。因此，它看起來像

<body> 
    <div id="background"></div> 
    ... 
</body>

而對於CSS我聲明如下：

#background { 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important; 
    background-size:contain; 
}

而且這並獲得成功對我來說。希望這有助於（有人在那裏：P）

來源

2012-08-18 22:59:22 Adrian

這對我來說適用於Chrome，但不適用於iOS。 –

您在尋找css background-attachment property。

div[data-role="page"]{ 
    background-attachment: fixed; 
}

更新：
background-attachment:fixed是，如果你使用的是iOS舊版本的你可以考慮的iScroll使用從支持iOS 5的。

來源

2012-01-19 09:32:46

由於修復它，但是這也不能正常工作。 – Sayali

它從iOS5開始，如果你使用的是舊版本的iOS，Safari所使用的版本不支持'background-attachment：fixed' –

它適用於iOS 5.我希望它能夠在iOS 4.2或4.3上運行 – Sayali

您可以設置背景圖片jQuery的頁面：

.ui-page { background-image:url(../ios/sample~ipad.png); 
background-repeat:no-repeat; background-position:center center; 
background-attachment:scroll; background-size:100% 100%; }

來源

2013-03-01 15:14:45 Manikandan

你可以試試這個：

.ui-mobile 
.ui-page-active{ 

display:block; 
overflow:visible; 
overflow-x:hidden; 

}

工作正常，我。

來源

2014-04-11 16:37:01 JavaScripter

試試這個，這個工作適合我。

position:fixed; 
top:0; 
left:0; 
width:100%; 
height:100%; 
background: url(../Images/loginBackground.jpg) 0 0 fixed !important; 
background-size:100% 100%; 
background-repeat: no-repeat;

來源

2015-11-04 01:17:02

<body> 
    <div id="background"></div> 
    ... 
</body>

CSS：

#background { 
    background-image: url("/images/background.png"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    background-position: 0 0; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

@media screen and (max-width: 480px) { 
    #background { 
     background-attachment: initial !important; 
    } 
}

的問題是，iOS移動設備有錯誤，同時渲染background-size:cover;和background-attachment:fixed;所以你必須通過@media

來源

2017-05-16 12:59:54

我如何設置固定的位置jquery mobile iPhone應用程序使用Phonegap的背景圖像

回答

相關問題