jQuery手机背景图片答案

【问题标题】：jQuery mobile background imagejQuery手机背景图片
【发布时间】：2011-09-22 00:10:18
【问题描述】：

我正在构建一个 jQuery 移动网站，并尝试在背景中插入一个可缩放的图像，该图像将根据手机的屏幕尺寸进行调整。这是我的代码：

<!DOCTYPE html> 
<html> 
<head> 
<title>Discover Dubrovnik</title> 
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<style type="text/css">
.ui-page {
    background: transparent url(image.gif);
}
</style>

</head> 
<body> 

<div data-role="page" data-theme="b">

<div data-role="header">
    <h1>Header tex</h1>
</div><!-- /header -->

<div data-role="content" data-theme="d">    
some text
    </div><!-- /content -->

<div data-role="footer">
<h1>Neki izbornik</h1>
</div>
</div><!-- /page -->

当窗口全屏时，我得到了背景图片，但是当我调整它的大小/使其更小（如手机中的屏幕）时，图像没有调整大小并且它没有居中，所以我只能看到一个一部分……

连接的 jQuery 和 CSS 文件从 jquerymobile.com 下载

【问题讨论】：

标签： jquery css jquery-mobile

【解决方案1】：

对于 jquery mobile 和 phonegap，这是正确的代码：

<style type="text/css">
body {
    background: url(imgage.gif);
    background-repeat:repeat-y;
    background-position:center center;
    background-attachment:scroll;
    background-size:100% 100%;
}
.ui-page {
    background: transparent;
}
.ui-content{
    background: transparent;
}
</style>

【讨论】：

我试过了，但背景从来没有出现过。在 Firebug 中，似乎主体样式被 JQM 中的 .ui-overlay-c 样式覆盖。
使用这个也没什么乐趣。

【解决方案2】：

以上都不适用于我使用 JQM 1.2.0

这确实对我有用：

.ui-page.ui-body-c {
    background: url(bg.png);
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;  
}

【讨论】：

好东西。除此之外添加 .ui-body-c, .ui-overlay-c { background: none;} 以取消覆盖图像的 jQuery 移动背景
这个对我有用，但背景图像也显示在左侧菜单中。我相信它是样本 B。无论如何，是否可以禁用左侧样本 B 或拥有它自己的背景。 JQM1.2.1

【解决方案3】：

我想你的答案是background-size:cover。

.ui-page
{
background: #000;
background-image:url(image.gif);
background-size:cover;  
}

【讨论】：

【解决方案4】：

这是我如何缩放标签。如果你想让它成为背景图像，你可以将它的位置设置为绝对，将图像放置在你想要的位置（使用：top、bottom、left、right 声明），并将它的 z-index 设置为页面其余部分的下方。

//简单的例子 .your_class_name { 宽度：100%；高度：自动； } //背景图片示例 .your_background_class_name { 宽度：100%；高度：自动；顶部：0px；左：0px； z 指数：-1；位置：绝对； }

要实现这一点，您只需在页面的 data-role="page" 元素中放置一个图像标记，该元素具有“.your_background_class_name”类和设置为您想要的图像的 src 属性你的背景。

我希望这会有所帮助。

【讨论】：

很好的解决方案 Jasper，我还需要使以下元素背景透明 -- .ui-page,.ui-content{ background: transparent; }

【解决方案5】：

试试这个。这应该有效：

<div data-role="page" id="page" style="background-image: url('#URL'); background-attachment: fixed; background-repeat: no-repeat; background-size: 100% 100%;"
    data-theme="a">

【讨论】：

【解决方案6】：

只需简单地用这个替换你的类。

.ui-page
{
   background: transparent url(images/EarthIcon.jpg) no-repeat center center;
}

我有同样的问题，我解决了。

【讨论】：

【解决方案7】：

只需将 !important 标记添加到 Paolo 答案中的所有 css 元素！适合我 JQM+phonegap

示例：

body {
    background: url(../images/background.jpg) !important;

【讨论】：

【解决方案8】：

使用 JQM 1.4.2，这对我有用（将主题更改为使用过的主题）：

.ui-page-theme-b, .ui-page-theme-b .ui-panel-wrapper {
    background: transparent url(../img/xxx) !important;
    background-repeat:repeat !important;
}

【讨论】：

【解决方案9】：

我发现这个答案对我有用

<style type="text/css">
#background{ 
position: fixed; 
top: 0; 
left: 0; 
width: 100% !important; 
height: 100% !important; 
background: url(mobile-images/limo-service.jpg) no-repeat center center fixed !important; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
z-index: -1; 
} 
.ui-page{ 
background:none; 
}
</style>

还将id="background" 添加到内容部分的 div 中

<div data-role="page" data-theme="a">
  <div data-role="main" class="ui-content" id="background">
  </div>
</div>

【讨论】：

【解决方案10】：

在你的 css 中覆盖 ui-page 类：

.ui-page {
    background: url("image.gif");
    background-repeat: repeat;
}

【讨论】：

【解决方案11】：

我的经验：

在某些情况下，必须为所有页面部分单独放置背景图像 url - 我用：

var bgImageUrl = "url(../thirdparty/icons/android-circuit.jpg)";

...

$('#indexa').live('pageinit', function() {

   $("#indexa").css("background-image",bgImageUrl);
   $("#contenta").css("background-image",bgImageUrl);
   $("#footera").css("background-image",bgImageUrl);
   ...
}

其中“indexa”是整个页面的id，“contenta”和“footera”是整个页面的id-s 分别是内容和页脚。

这在 PhoneGap + jQuery Mobile 中肯定有效

【讨论】：