將圖像彼此疊加

Question

我使用了引導程序將背景圖像的大小與窗口相關聯，但是當我嘗試將圖像放在其頂部時，它們會附加在下面。 還附上了我的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="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>

Answer 1

像這樣向圖像添加一個類：

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

然后添加css'位置絕對值，頂部0，左側0'：

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

將圖像彼此疊加

問題描述

1 個解決方案

解決方案1
0 2016-10-02 06:49:20

將圖像彼此疊加

問題描述

1 個解決方案

解決方案1 0 2016-10-02 06:49:20

解決方案1
0 2016-10-02 06:49:20