圖片沒有顯示在表

我正在通過我的大學提供的香草JS課程自己工作。這個課程是只有在香草JS，所以沒有jQuery（無賴，我知道...）。圖片沒有顯示在表

我的問題不是要求幫忙解決問題，而是試圖找出爲什麼沒有出現。

我們的任務是使用教授提供的骨架代碼創建一個簡單的巨石短跑遊戲。

我創建了一個2d數組，其中包含遊戲地圖，其中數組中的每個元素都包含對應於特定.png文件的引用（數字）。

在使用CSS和JS之前，我知道您可以使用項目的z軸來放置其他項目的「上方」。但是，在我的情況下，它似乎並沒有工作，或者我錯過了其他的東西。

在我繪製地圖的if子句中，您可以看到我要查找的第一個數字（9）創建了一個單元格，該單元格將包含名爲'baddie'（玩家），但也將持有一個id爲'開放'。

var newRow = false; 
content.appendChild(document.createElement('table')); 
for (var row = 0; row < 10; row++) { 
    // Each column in row 
    if (newRow) { 
     content.appendChild(document.createElement('tr')); 
    } 
    for(var col = 0; col < 10; col++){ 
     if (gameArea[row][col] == 9){ 
      tile = document.createElement('td'); 
      tile.id = 'open'; 
      tile.className = 'baddie'; 
      content.appendChild(tile); 
      console.log("IM HERE"); 
     } else if (gameArea[row][col] == 10){ 
      tile = document.createElement('td'); 
      tile.id = 'open'; 
      content.appendChild(tile); 
     } 
     else if (gameArea[row][col] == 11){ 
      console.log("found one"); 
      tile = document.createElement('td'); 
      tile.id = 'wall'; 
      content.appendChild(tile); 
     } else if (gameArea[row][col] == 12) { 

     } else { 

     } 
    } 
    newRow = true;

我期待的是壞人（因爲具有較高的z-index）將被放置在「開放」的頂部，但似乎並沒有被髮生。即使我刪除了對「開放」的引用，「baddie」也沒有出現。

這是一個鏈接到我設置了一個JS小提琴：jsFiddle，在那裏你可以找到所有的代碼。

如果我的問題還不夠清楚，我需要弄清楚爲什麼Kyubi文件似乎沒有出現？

在我的本地文件Kyubi.png文件是在瓷磚的父文件夾：

所有瓷磚出現就像在小提琴，而不是玩家對象。 ..

來源

2016-11-11 geostocker

我看到你的jsfiddle「壞人」分區，但唯一的CSS規則它有一個左側和頂部的值，你能不能給我解釋一下你如何將圖像設置爲baddie div，還是我缺少某些東西？ – jdmdevdotnet

如果你正在使用'z-index'，元素需要'位置：絕對/相對/固定' – zer00ne

此外，由於它只是一個邊框，所以顯示的是圖塊。我沒有看到任何草地，因爲背景圖像的名稱，這是預期的。 'url（https://orionhub.org/file/Todai-OrionContent/images/new/grass0.png）' – jdmdevdotnet

您正在將背景圖像url設置爲.baddie類的屬性。您的默認背景（非baddie）通過ID設置。

由於css的特殊性，基於id的背景比類背景具有更高的優先級。

您還有一個問題，因爲您正在爲多個元素分配相同的ID（「打開」） - ID應該是唯一的。

找到一種方法來設置td元素的背景，比id更少特異性 - 嘗試將其分配給td。

td { 
    z-index: 1; 
    height: 31px; 
    width: 31px; 
    background-image: url(https://orionhub.org/file/Todai-OrionContent/images/new/grass0.png); 
    border: 1px solid white; 
}

JS提琴修復被改變爲開放的選擇：jsfiddle

來源

2016-11-11 15:27:54 hairmot

圖片沒有顯示在表

回答

相關問題