tok*_*mak 26 css jquery jquery-mobile
我正在构建一个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下载
Pao*_*olo 23
对于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>
raf*_*raf 20
以上都不适用于使用JQM 1.2.0的我
这对我有用:
.ui-page.ui-body-c {
background: url(bg.png);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
小智 10
我想你的回答是background-size:cover.
.ui-page
{
background: #000;
background-image:url(image.gif);
background-size:cover;
}
以下是我缩放<img>标签的方法.如果要将其设置为背景图像,可以将其设置为绝对位置,将图像放置在所需位置(使用:top,bottom,left,right声明),并将其z-index设置在页面的其余部分下方.
//simple example
.your_class_name {
width: 100%;
height:auto;
}
//background image example
.your_background_class_name {
width: 100%;
height:auto;
top: 0px;
left: 0px;
z-index: -1;
position: absolute;
}
要实现这一点,您只需将图像标记放在页面的data-role ="page"元素中,该元素具有".your_background_class_name"类,并且src属性设置为您想要作为背景的图像.
我希望这有帮助.
小智 6
试试这个.这应该工作:
<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">