0

我正在尝试使用.jpg. 对于我的一生，我无法弄清楚这一点。它快把我逼疯了！我一直在 SO 和 Google 上都没有任何人的答案。
我当前的标题信息

<head>
    <title>Veolia Water Splash Guide</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
    <link rel="stylesheet" href="./css/stylo.css"/>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script src="./js/main.js"></script>
</head>

我的申请流程如下：

  1. index.html在图片淡入时加载。（此 CSS 覆盖效果很好）
  2. 图像淡入后，我$.mobile.changePage()对另一页进行处理，而不是多页格式
  3. 这是失败的地方，背景加载，但随后被某些东西覆盖。我似乎无法弄清楚是什么压倒了它。

这是我的 CSS

#logo
{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 80%;
}

body
{
    background: url('../img/background.jpg') !important;
    background-repeat:repeat-y !important;
    background-position:center center !important;
    background-attachment:scroll !important;
    background-size:100% 100% !important;
}

.ui-page .ui-body-c .ui-page-active .ui-overlay-c .ui-mobile-viewport
{
    background: transparent !important;
}

任何人都有一些指示或知道我做错了什么？背景闪烁了几秒钟，然后被扔掉了……

提前感谢您的帮助！

4

1 回答 1

8

首先，您需要在设置为透明的 CSS 类之间使用逗号。接下来，由于 ui-overlay-c 也应用于 body，您可以将其背景图像与 body 一起设置。

所以一起，先设置透明度，再设置body背景：

.ui-page, .ui-body-c, .ui-page-active, .ui-overlay-c, .ui-mobile-viewport
{
    background: transparent !important;
}

body, .ui-overlay-c
{
    background: url('http://www.hdwallpapers.in/wallpapers/digital_layers-1440x900.jpg') !important;
    background-repeat:repeat-y !important;
    background-position:center center !important;
    background-attachment:scroll !important;
    background-size:100% 100% !important;
}

这是上面的一个工作小提琴：http: //jsfiddle.net/ezanker/5GgR9/

于 2013-10-14T13:29:10.873 回答