将图像放在另一个图像之上

Putting images on top of one another

本文关键字：图像 另一个      更新时间：2023-09-26

我已经使用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="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>

为图片添加一个类:

  <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
}
相关文章：