简体   繁体   中英

Putting images on top of one another

I have used bootstrap to correlate the size of my background image to the window, but when I try to put images on top of it they get appended below. Also have attached my javascript, full functional, supposed to move images on touch of key

 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="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> 

add a class to the image like this:

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

and then add a css 'position absolute, top 0, left 0 ':

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM