将图像放在另一个上

我已经使用bootstrap将我的背景图像的大小关联到窗口，但是当我尝试将图像置于其上时，它们会在下面附加。还附上我的javascript，全功能，应该在关键将图像放在另一个上

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) 
 

 

 

 

 
})

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; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]*" 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="[email protected]*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 
 
    <script data-require="[email protected]*" 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>

来源

2016-10-02 mkeigwin

触摸移动图像类添加到图像像这样：

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

然后添加css'position absolute，top 0，left 0'：

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

来源

2016-10-02 06:49:20 Aschab

将图像放在另一个上

回答

相关问题