gpt4 book ai didi

jquery - 我无法使用 JQuery Mobile 让我的背景填满整个屏幕

转载 作者:行者123 更新时间:2023-11-28 17:04:26 26 4
gpt4 key购买 nike

我所能得到的只是标题下的横幅类型图片。它不适合屏幕的宽度和高度,这正是我想要的,因此可以调整不同的手机尺寸。我研究了很多,但我无法得到它。这是我得到的图像。我希望图片填满整个页面,位于页眉和页脚之间,并且我希望它可以根据屏幕大小进行调整。

现在遇到这个问题。此外,所有 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 -->

最佳答案

我建议您使用 .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

关于jquery - 我无法使用 JQuery Mobile 让我的背景填满整个屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30600201/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com