Question

我的背景图片是1080x648像素，我让它居中。我输入了迷你游戏的javascript代码，其中图像文件将在屏幕上移动，但是，图像文件从我的背景图像之外的屏幕左侧开始。有没有办法将它与我的背景一起居中？

这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

   function runIt(me) {
      $(me).css("top",Math.random()*500)
      .animate({"left":"1000px"},Math.random()*3500+1500,function(){$(me).css("top",Math.random()*500)})
      .animate({"left":"0px"},Math.random()*3500+1500,function(){$(me).css("top",Math.random()*500);runIt(me)});
   }
   $(".target").each(function(){runIt($(this))});

score = 0;
function calcScore(me){
  $(me).hide();
  score++;
  $("#message").html("You shot "+score);
  if(score==6){
    alert("Congratulations! You cleared the lake!");
    window.location.href = "alfheim_lake.html";
  }
}

$(document).ready(function(){
  $(".target").each(function(){runIt($(this))});
})

window.onload = function(){
   setInterval(function(){
       alert("You have drowned.");
       window.location.href = "game_2.html";
   }, 60000);
};
</script>
<body>
<div id="container">
<div id="background">
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
<div class="target" onclick="calcScore(this)"><img src="images/bottle.png" width="80" height="80" alt=""/></div>
</div>
</div>
</body>

这是我的CSS文件：

@charset "UTF-8";

body {
  line-height:0;
  text-align:center;
  padding:8px;
  padding-left:80px;  
}

#container {
    overflow:hidden;
    float:left;
    width:1080px;
    height:648px;
}

#background {
    background-image:url(images/underwater.jpg);
    width:1080px;
    height:648px;
    float:left;
    overflow: hidden;
    background-repeat:no-repeat;
}

.target {
    position:absolute;
    width:80px;
    height:80px;
    cursor:pointer;
}

Answer 1

我认为这一定对你有用

#background{ 
 width:1080px;
 height:648px;
 float:left;
 background: url(images/underwater.jpg) no-repeat center center; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 overflow: hidden; 
 }

如何使背景中心移动物体？

1 个答案: