时间戳

首页 > 解决方案 > 如何在侧列中显示 ui 页面之外的背景图像

jquery-mobile - 如何在侧列中显示 ui 页面之外的背景图像

问题描述

我现在尝试将我的 jQuery Mobile 网站重用于智能手机，用于大屏幕。感谢这个论坛，我可以缩小主要内容列/空间，所以我认为它更容易阅读。但是现在两边都有一个空白空间，我想在其中显示背景图像。

我尝试使用 body 标签、ui-page 和 body.ui-mobile-viewport

我可以获得中间栏的背景，内容空间，不是我想要的，但两侧栏没有背景。

知道如何在侧栏中显示背景图像吗？ 

<style>
/* Breitenanpassung PC, width change fr pc */
@media only screen and (min-width: 64.1em){
        .ui-page{
            width: 45em !important;
            margin: 0 auto !important;
            position: relative !important;
            border-right: 0.3em #666 outset !important;
            border-left: 0.3em #666 outset !important;
            background : url('http://beta.mondkalender-mobil.de/templates/Mondkalender-mobil/images/hintergrund_breit.gif');

        }
</style>`

现在的样子

标签： jquery-mobile

解决方案

您需要为整个文档设置背景body，JQM 会注意为当前设置背景page：

@media only screen and (min-width: 64.1em) {
  .ui-page:not(.ui-dialog) {
    width: 45em !important;
    margin: 0 auto !important;
    position: relative !important;
    border-right: 0.3em #666 outset !important;
    border-left: 0.3em #666 outset !important;
  }
  .ui-mobile-viewport {
    background : url('http://beta.mondkalender-mobil.de/templates/Mondkalender-mobil/images/hintergrund_breit.gif');
  }
}

推荐阅读