0

我正在为大学做一个项目，但在移动设备上显示图像时遇到问题。 桌面截图

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

手机截图

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

<!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>

4

1 回答 1

0

首先<style>标签应该在你的<head>. <div id="bg">在 html body 元素之上。为什么#bgid 有 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>withdefer标志。考虑将 css 文件添加到您的项目并在那里添加所有样式。此外，由于您已经拥有 js 文件，您可以通过addEventListener()Method 将您的点击行为放在那里。

更新： jsfiddle
Update2：
猫咪

于 2017-04-26T17:13:45.367 回答