使用 CSS 在各种图像之上的各种图像

Question

我使用此代码的最终目标是构建一个“打鼹鼠”游戏。

我希望我的痣位于泥土之上。

我有 6 个痣和 6 个污垢图像，它们都是用 JS 添加的，我希望每个痣都位于每个污垢图像的顶部。

在这里查看我的代码：

HTML

    const gameCont = document.getElementById('game-container')
    const points = document.getElementById('points');
    let all = document.getElementsByTagName("img");
    
    for (let i = 0; i < 6; i++) {
        var img = document.createElement('img');
        img.src = '/images/dirt.png'
        img.classList.add("dirt-" + [i])
        gameCont.appendChild(img)
          
    }
        
    for (let i = 0; i < 6; i++) {
        var mole = document.createElement('img');
        mole.src = '/images/mole.png'
        mole.classList.add("mole-" + [i])
        gameCont.appendChild(mole)
    }

        body{
        background-color:#FFC000;
        }
        h1{
            display:flex;
            justify-content:center;
            align-items:center;
            font-size:60px;
        }
        #game-container{
          
        }
        
        .dirt-0,.dirt-1,.dirt-2, .dirt-3,.dirt-4,.dirt-5 {
            height:100px;
            width:160px;
        }
    
        .mole-0,.mole-1,.mole-2, .mole-3,.mole-4,.mole-5{
            z-index:3;
            width:100px;
            height:100px;
        } 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Whack - A - Mole!</title>
    </head>
    <body>
    <h1>Whack - A - Mole!</h1>
    <h1 id="points"></h1>
    <div id="game-container">
    
    </div>
    
    <script src="script.js"></script>
      
    </body>
    </html>

最好的方法是什么？

Answer 1

要将图像放在另一个图像上，我们可以使用position: absolute。用 div 包裹图片，而不是 2 个 for 循环，一个循环就可以满足要求。

for (let i = 0; i < 6; i++) {
    var div = document.createElement("div");
    div.classList.add('box');
    var img =  document.createElement('img');
    dirt.src = '/images/dirt.png'
    dirt.classList.add("dirt-" + [i])
    div.appendChild(dirt)
    var mole = document.createElement('img');
    mole.src = '/images/mole.png'
    mole.classList.add("mole-" + [i])
    div.appendChild(mole)
    gameCont.appendChild(div)
  } 

CSS部分：

.box{
  position: relative;
  width: 100px;
  height: 160px;
}

.dirt-0,.dirt-1,.dirt-2, .dirt-3,.dirt-4,.dirt-5 {
    max-width:100%;
    position: absolute;
    top:0;
}

.mole-0,.mole-1,.mole-2, .mole-3,.mole-4,.mole-5{
    z-index:1;
    width:100px;
    height:100px;
} 

Answer 2

要将痣放在污垢上方，您需要将它们包裹到具有position:relative 的div，然后将position: absolute 添加到痣。使用top: 0，您可以将其移动到污垢的顶部，left:0、right:0 和margin:0 auto 会将其居中。

这应该也可以：

CSS

<style>

body{
  background-color:#FFC000;
}
h1{
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:60px;
}

.dirt-0,.dirt-1,.dirt-2, .dirt-3,.dirt-4,.dirt-5 {
  height:100px;
  width:160px;
}

.mole-0,.mole-1,.mole-2, .mole-3,.mole-4,.mole-5{
  z-index:3;
  width:100px;
  height:100px;
  position: absolute;
  top: 0;
  left:0;
  right:0;
  margin: 0 auto;
}

.dirtContainer{
  width: fit-content;
  width: -moz-fit-content;
  height: fit-content;
  height: -moz-fit-content;
  position:relative;
}

#imagesDiv{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

</style>

HTML

<h1>Whack - A - Mole!</h1>
  <h1 id="points"></h1>
  <div id="game-container">
    <div id="imagesDiv"></div>
  </div>


<script>
  const gameCont = document.getElementById('game-container')
  const points = document.getElementById('points');
  let all = document.getElementsByTagName("img");
  let images = "";

  for (let i = 0; i < 6; i++){
    images += "<div class='dirtContainer'>";
    images += "<img src='./images/dirt.png' class='dirt-" + i + "'>";
    images += "<img src='./images/mole.png' class='mole-" + i + "'>";
    images += "</div>";
  }

  document.getElementById('imagesDiv').innerHTML = images;
</script>