Question

我能得到的只是标题下的横幅类型的图片。屏幕宽度和高度都不合适，这就是我想要的，因此不同的手机尺寸会调整。我已经研究了很多，但我无法得到它。这是我得到的形象。我希望图片填充页眉和页脚之间的整个页面，我希望它可以调整屏幕大小。

现在遇到这个问题。此外，所有m页都有背景，我只想在家里。

enter image description here

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<style type="text/css">

 #background {
background: url(landscape.jpg);
background-repeat:repeat-y;
background-position:center center;
background-size:100% 100%;
}


.ui-page {
background: transparent;
}
.ui-content{
background: transparent;
}

</style>
</head>
<body>


<div data-role="page" id="Home" >

    <div data-role="header" data-position="fixed" >
        <h1>Header</h1>
        <a href="#bars" data-role="button" data-icon="bars" data-    iconpos="notext" data-theme="a" data-inline="true">Bars</a>
    </div><!-- /header -->

<div data-role="content" id="background">
    <p>Home.</p>
</div><!-- /content -->

<div data-role="footer" data-position="fixed">
    <h4>Page Footer</h4>
</div><!-- /footer -->

Answer 1

我建议您使用 .ui-content 类来添加/编辑内容的样式。

尝试使用此CSS：

.ui-content {
background: transparent url(http://miriadna.com/desctopwalls/images/max/Ideal-landscape.jpg);
background-size :cover; // or you can leave as 100% 100%
color:#FFFFFF;
text-shadow:1px 1px 1px #000000;
}

.ui-page {
background: transparent;
}

以下JS / Jquery：

$(document).delegate('#Home', 'pageshow', function () {
var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
$(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});

<强>更新

JSFIDDLE

Answer 2

尝试

background-size:cover;

或许您可以提供问题的链接？

我无法使用JQuery Mobile获得整个屏幕的背景

2 个答案: