圖像沒有在移動設備上顯示，但在桌面上顯示，使用PhoneGap

我正在爲大學做一個項目，但無法在移動設備上顯示圖像。 Desktop screenshot 圖像沒有在移動設備上顯示，但在桌面上顯示，使用PhoneGap

因此，背景中的圖像顯示在桌面上，如上所示。以下是沒有後臺加載的移動應用程序。

這是我的代碼。我的圖像位置是正確的，看到桌面加載它，我從另一個堆棧溢出答案得到的樣式代碼，但它沒有幫助。

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

來源

2017-04-26 Callum Flannery

所有<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。您可以使用defer標誌將<script src="cordova.js" defer></script>添加到您的<head>中。考慮將css文件添加到您的項目中並在其中添加所有樣式。此外，既然您已經有js文件，您可以通過addEventListener()方法將您的點擊行爲放在那裏。

更新： jsfiddle
UPDATE2：

來源

2017-04-26 17:13:45 NightKn8

確定感謝您的評論，但可怕的代碼對我的問題的影響？或者你在這裏解釋了什麼來幫助我解決問題？也只有我的風格在這裏，因爲即時通訊試圖讓它工作，它不是如何實際上看 –

請看我更新的答案。 – NightKn8

我試過答案，但沒有變化。 –

圖像沒有在移動設備上顯示，但在桌面上顯示，使用PhoneGap

回答

相關問題