【发布时间】：2021-02-05 22:21:03
【问题描述】：
在一个简单的 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 */
【问题讨论】：
-
我已经在我的问题中提到过 - 这也不起作用 - 有人刚刚删除了我的评论并且我已经尝试过了。我也使用了语音标记，但也没有用
-
将
background-size: cover;添加到#character。这能解决吗？由于您的声明是正确的（网址） -
谢谢拉尔斯，但不——没有修复它....但奇怪的是图像的一部分突出了。嗯
-
我也试过 z-index=10000000 - 但这似乎不起作用
-
好的，但问题不在于网址。它是背景图像的位置/大小。 :) 继续努力 :)
标签： javascript html css background-image