Question

我想为我的JQuery移动页面添加背景图像，我有外部CSS。仅在删除JQuery脚本时才会显示背景图像。如果没有JQuery脚本干扰，我怎么能继续使用我自己的CSS？我还想使用我的CSS

来使用JQuery按钮等

HTML

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Find me</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/
jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/
jquery.mobile-1.4.5.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/findme.css">
  </head>
  <body>
    <!-- background not showing up here -->
  </body>
</html>

外部CSS

body {
    background-image: url("../images/bg.jpg");
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-position: center center;
    background-attachment: fixed;
}

Answer 1

保留脚本。
加载页面并检查body元素。
找出CSS规则赋予它background-image属性。
在自己的CSS中构建一个更强大的CSS选择器。

如果您对上述步骤有任何疑问：

在jsfiddle中复制您的问题并更新您的问题，我将为您构建选择器。

更新：

以下资源都不是

https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css，
https://code.jquery.com/jquery-1.10.2.min.js
https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js

正在设置background-image元素的body属性。这意味着它设置在您未提供的css/findme.css内。

请在this jsfiddle中添加css/findme.css的内容，保存并使用生成的链接更新您的问题。

Answer 2

您可以尝试更改＆＃34; body＆＃34;选择器到＆＃34; .ui-page＆＃34;选择你的css文件并添加！important：

.ui-page {
    background-image: url("../images/bg.jpg") !important;
    background-repeat:no-repeat !important;
    -webkit-background-size:cover !important;
    -moz-background-size:cover !important;
    -o-background-size:cover !important;
    background-size:cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
}

我希望这可以帮到你！

Answer 3

看起来你的一个脚本覆盖了body样式。您可以创建一个覆盖正文的背景div来模拟整页背景。

示例HTML：

<body>
  <div id="background">
  </div>
</body>

示例CSS：

html, body {
  height: 100%;
  width: 100%;
  background: transparent;
}

#background {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url("../images/bg.jpg");
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-position: center center;
    background-attachment: fixed;
}

JQuery移动添加自己的CSS

3 个答案: