HTML、CSS 和 JavaScript 游戏中的背景图像未显示

Question

在一个简单的HTML、CSS和JavaScript游戏中，我替换了（在CSS）

background-color:green;

和

background-image: url(flappybird.png);

我也尝试过：（并用单引号）

background-image: url("flappybird.png");

但是图片没有显示在页面上。我试过添加分号和语音标记。

我也试过给角色添加 z-index=10000000，但没有用。

谁能告诉我我做错了什么。我可以确认图片命名正确 flappybird.png 并且位于根文件夹中。

var character = document.getElementById("character");
var enemy = document.getElementById("enemy");



function jump(){
    if(character.classlist!="animate"){
    character.classList.add("animate");
    }
    setTimeout(function(){
        character.classList.remove("animate");
    },500);
    
}

//right movement

function right() {

  var leftVal =  parseInt(window.getComputedStyle(character).getPropertyValue("left"))
  character.style.left = (leftVal + 30) + "px";

}

//left movement

function left() {

  var leftVal =  parseInt(window.getComputedStyle(character).getPropertyValue("left"))
  character.style.left = (leftVal - 30) + "px";

}




var checkDead =setInterval(function(){
    var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
    var enemyLeft = parseInt(window.getComputedStyle(enemy).getPropertyValue("left"));
    //ADD VARIABLE TO FIND CHARACTER RIGHT -if it collides with enemy left, you are out
    //remove the condition that the enemy has to be in the first 30 pixels of the game (left side)
    var characterRight =parseInt(window.getComputedStyle(character).getPropertyValue("right"));
    
 
    
    if(
        characterTop==enemyLeft //have tried characterRight==enemyLeft didn't work
    )
    {
        enemy.style.animation="none"; //remove the animation
        enemy.style.display="none";
        alert("Game Over");
        
    } 
},10);


//left
addEventListener("keydown", function(e) {
    if(e.keyCode == 37) left()
})

//jump (up)
addEventListener("keydown", function(e) {
  if (e.keyCode === 38) {
    jump()
  }
})

//right
addEventListener("keydown", function(e) {
  if (e.keyCode === 39) {
    right()
  }
})

*{
        padding:0;
        margin:22;
    }
    
    #game{
        width:500px;
        height:500px;
        border:4px solid #171918;
    }
    
    #character{
        width:30px;
        height:120px;
        /*background-color:green;*/
        background-image: url(flappybird.png);
        position:relative;
        top:320px;
        border-radius:20px;
        /*animation: jump 300ms */
        
    }
    
    /* new class called animate */
    .animate{
        animation: jump 500ms;
    }
    
    
    #enemy{
        width:60px;
        height:60px;
        background-color:red;
        border-radius:14px;
        position:relative;
        top:320px;
        le

ft:440px;
    animation: moveenemy 1s infinite linear;
    
}

@keyframes moveenemy{
    0%{left:440px;}
    50%{top:58px;}
    100%{left:0px; top:320x;}
}

@keyframes jump{
    0%{top:380px;}
    30%{top:50px;}
    50%{top:40px;}
    100%{top:380px;}
}



/* adding sky*/
#sky{
    width:500px;
    height:340px;
    background-color:skyblue;
    position:absolute;
    top:118px;
}

/* adding ground */
#ground{
    width:500px;
    height:170px;
    background-color:bisque;
    position:absolute;
    top:450px;
}

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
  <h1>Game</h1>
   <div id="game">
        <div id="sky"></div>
       <div id="ground"></div>
        <div id="enemy"></div>
       <div id="character"></div>
   </div>
   
<script src="script.js"></script>
</body>

</html>

下面的评论建议调整大小和添加背景大小的选项：封面；这在一定程度上起作用，但没有解决使图像符合我们想要的规范的问题。在此处调整宽度和高度，不会调整大小 - 它只是显示或覆盖图像。

如果我要使用图像，它也应该调整大小，我注意到在这种情况下宽度和高度不能按预期工作。是否也可以在任何答案中解决这个问题。

下面的代码 因此，如果我调整了宽度和高度，但没有正确调整大小，我无法弄清楚图像的大小。

#character{
    width:60px;
    height:50px;
    /*background-color:green;*/

    background-image: url(flappybird.png);
    position:relative;
    top:320px;
    background-size: cover;
    /*animation: jump 300ms */

Answer 1

this是您想要达到的目的吗？我添加了一个小边框以显示宽度问题已解决。

#character {
  width: 50px;
  border: 1px solid black;
  height: 50px;
  background-color: green;
  background: url("https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fatomix.vg%2Fwp-content%2Fuploads%2F2014%2F05%2FFlappy-Bird.png&f=1&nofb=1")
    center no-repeat;
  background-size: contain;
  position: relative;
  top: 50%;
  border-radius: 20px;
  /*animation: jump 300ms */
}

更新:

background-size: contain;规则告诉背景根据容器调整其大小，而不拉伸它，您可以阅读有关此规则值的更多信息here. If the container is bigger than the img, it might repeat, so it's wise to control it with background-repeat: no-repeat;, or use the shorthand version of background: <url> <position> <repeat>; more on that here。

关于将顶部从 px 更改为 % 这纯粹是实验性的，同时试图解决您的问题。您可以添加您的原始值。

HTML、CSS 和 JavaScript 游戏中的背景图像未显示

background-image in HTML, CSS and JavaScript game not displaying

html

javascript

css

background-image