Question

我正在为大学做一个项目但是在移动设备上显示图像有问题。 Desktop screenshot

因此，背景中的图像显示在桌面上，如上所示。以下是没有后台加载的移动应用程序。

这是我的代码。我的图像位置是正确的，因为桌面加载它，我得到了另一个堆栈溢出答案的样式代码，但它没有帮助。

<!DOCTYPE html>

<html>
<style>
#bg {
background: url(images/logo.jpg) repeat scroll 50% 0px / cover transparent;
background-image: url(images/logo.jpg);
width: 400px;
height: 400px;
}
</style>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, 
user-scalable=yes, width=device-width">

    <title>ITCOA</title>

</head>
<div id="bg">
<body>
    <h1 style="text-align:center;margin-top:80px"> Welcome to IT Carlow Orientation App </h1>
        <div id="navcontainer" style="margin-left:150px;margin-top:100px;">
            <button type="button" id="findPathButton"onclick="parent.location='findPlace.html'">Find a place!</button><br><br>
            <button type="button" id="showMapsButton" onclick="parent.location='showMaps.html'">Show Maps!</button>
        </div>

</div>
    <script type="text/javascript" src="cordova.js"></script>
</body>

感谢您的帮助。

更新了代码

<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width">
<title>ITCOA</title>
<script src="cordova.js" defer></script>
<style>
  #bg {
    background: url('images/logo.jpg') center center / cover no-repeat;
    width: 400px;
    height: 400px;
  }

  button {
    margin: 15px 0 15px 0;
    display: block;
  }

</style>
 </head>

  <body>
    <div id="bg">
      <h1 style="text-align:center;margin-top:80px"> Welcome to IT Carlow 
Orientation App </h1>
  <div id="navcontainer" style="margin-left:150px;margin-top:100px;">
    <button type="button" id="findPathButton" 
onclick="parent.location='findPlace.html'">Find a place!</button>
    <button type="button" id="showMapsButton" 
onclick="parent.location='showMaps.html'">Show Maps!</button>
  </div>
</div>

Answer 1

首先，<style>标记应位于您的<head>中。 <div id="bg">高于html body元素。为什么#bg id有2个背景声明？ background: url(images/logo.jpg) repeat scroll 50% 0px / cover transparent;和 background-image: url(images/logo.jpg);？请至少阅读W3s。另一件事是你的代码总体上很糟糕。我建议停止使用内联样式元素，并停止使用内联javaScript。您可以使用<script src="cordova.js" defer></script>标记向<head>添加defer。考虑将css文件添加到项目中并在其中添加所有样式。此外，由于您已经拥有js文件，因此可以通过addEventListener()方法将您的点击行为放在那里。

<强>更新 jsfiddle
的 UPDATE2：

图像未在移动设备上显示，但使用PhoneGap在桌面上显示

1 个答案: