Question

我使用bootstrap将背景图像的大小与窗口关联起来，但是当我尝试将图像放在它上面时，它们会在下面附加。还附加了我的javascript，功能齐全，应该按键移动图像

＆＃13;

console.log('javascript linked');

$(function(){

function player1() {
  var margin1 = $('#bar1').offset().left;
  if (margin1 < "600") {
    var move1 = (margin1 + 50);
    $('#bar1').css('marginLeft', move1);
  } else {
    alert("Player 1 is the Winner!!!!");
  }
}

function player2() {
  var margin3 = $('#bar3').offset().left;
  if (margin3 < "600") {
    var move3 = (margin3 + 50);
    $('#bar3').css('marginLeft', move3);
  } else {
    alert("Player 2 Is The Winner!!!!");
  }
}


function checkPlayer1(event) {
  var x = event.keyCode;
  if (x===13){
    player1();
  }
}

function checkPlayer2(event) {
  var y = event.keyCode;
  if (y===32){
    player2();
  }
}


  function move(){
        var div = $("#bar2");
        div.animate({left: '638px'}, 1000);
        };

$('body').keypress(checkPlayer2);
$('body').keypress(checkPlayer1);
$("window").ready(move)




})

＆＃13;

h1 {
  position: absolute;
  top: 5%;
  margin: 0 auto;
  font-size: 5vw;
  left: 10%;
}
#bar1{
  background: url('http://orig11.deviantart.net/c8fb/f/2011/237/3/1/profile_picture_by_red_angry_bird-d47u569.png');
  background-repeat:no-repeat;
   background-size:contain;
  margin-left: 10px;
  height: 50px;
  width: 50px;
  display: inline-block;

}
#bar2{
background: url('http://vignette3.wikia.nocookie.net/angrybirds/images/b/bf/Kingcry.gif/revision/latest?cb=20130310195100');
  background-repeat:no-repeat;
   background-size:contain;
  margin-left: 10px;
  height: 50px;
  width: 50px;
  display: inline-block;
  position: relative;
}
#bar3{
background: url('http://www.clipartkid.com/images/47/angry-bird-yellow-icon-angry-birds-iconset-femfoyou-uJ3C4l-clipart.png');
  background-repeat:no-repeat;
   background-size:contain;
   margin-left: 10px;
  height: 50px;
  width: 50px;
  display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <img src="http://www.walldevil.com/wallpapers/a28/angry-birds-computer-background-linnut-rovio-writing.jpg" />

<h1>First Player to Catch the Pig Wins!</h1>
<div class="flex-container">
  <div class="flex-item"  id="bar1"></div> <br>
  <div class="flex-item"  id="bar2"></div> <br>
  <div class="flex-item"  id="bar3"></div>
</div>
</body>
</html>

＆＃13;

Answer 1

像这样在图像中添加一个类：

  <img class = "img-background" src="http://www.walldevil.com/wallpapers/a28/angry-birds-computer-background-linnut-rovio-writing.jpg" />

然后添加一个css'位置absolute，top 0，left 0'：

.img-background{
    position: absolute;
    top: 0;
    left: 0
}

将图像放在另一个上面

1 个答案: