背景 img 多个类。替代 z-index [重复]

Question

我想将 z-index 设置为背景图像。

我希望始终显示 .player 背景，即使在同一个框中我有另一个具有另一个背景的类。

如果您单击右键，您会看到 .player 转到蓝色框，将添加另一个类。 .player 背景必须始终显示。

为什么 z-index 不起作用？有没有其他选择？

谢谢

  let moveCounter = 0;
  let playerOne = {
    currentWeapon: "w1" 
    }

  var grid = document.getElementById("grid-box");


  for (var i = 0; i <= 8; i++) {
    var square = document.createElement("div");
    square.className = 'square';
    square.id = 'square' + i;
    grid.appendChild(square);
  }


  $("#square" + 0).addClass("player")
  $("#square" + 3).addClass("w3")

  function getWeapon(ele) {

    let classList = $(ele).attr("class").split(' ');

    for (let i = 0; i < classList.length; i += 1) {

      if (classList[i][0] === "w") { 

        $(ele).addClass(playerOne.currentWeapon) 
        playerOne.currentWeapon = classList[i]; 

        $(ele).removeClass(playerOne.currentWeapon)
        return classList[i]
      }
    }

  }

  $('#right-button').on('click', function() {

    $("#square" + moveCounter).removeClass("player")
    moveCounter += 1;
    $("#square" + moveCounter).addClass("player")


    getWeapon("#square" + moveCounter);

  });

  #grid-box {
    width: 420px;
    height: 220px;
  }
  #grid-box>div.square {
    font-size: 1rem;
    vertical-align: top;
    display: inline-block;
    width: 10%;
    height: 10%;
    box-sizing: border-box;
    border: 1px solid #000;
  }

  .player {
    background: url(http://placekitten.com/200/300) no-repeat 0 0;
    z-index: 1;
  }

  .w1 {
    background: url(https://preview.ibb.co/ntRarR/watermark3.png) no-repeat center center;
    z-index: 0;
  }

  .w3 {
    background-color: blue;
  }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <div id="grid-box"></div>

  <button class="d-pad-button" id="right-button">Right button</button>

非常感谢你们。

Answer 1

问题在于css 文件中的class 顺序。更多信息可以找到here

变化：

.player {
  background: url(http://placekitten.com/200/300) no-repeat 0 0;
  z-index: 1;
}

.w1 {
  background: url(https://preview.ibb.co/ntRarR/watermark3.png) no-repeat center center;
  z-index: 0;
}

收件人：

.w1 {
  background: url(https://preview.ibb.co/ntRarR/watermark3.png) no-repeat center center;
  z-index: 0;
}

.player {
  background: url(http://placekitten.com/200/300) no-repeat 0 0;
  z-index: 1;
}

演示

let moveCounter = 0;
  let playerOne = {
    currentWeapon: "w1" 
    }

  var grid = document.getElementById("grid-box");


  for (var i = 0; i <= 8; i++) {
    var square = document.createElement("div");
    square.className = 'square';
    square.id = 'square' + i;
    grid.appendChild(square);
  }


  $("#square" + 0).addClass("player")
  $("#square" + 3).addClass("w3")

  function getWeapon(ele) {

    let classList = $(ele).attr("class").split(' ');

    for (let i = 0; i < classList.length; i += 1) {

      if (classList[i][0] === "w") { 

        $(ele).addClass(playerOne.currentWeapon) 
        playerOne.currentWeapon = classList[i]; 

        $(ele).removeClass(playerOne.currentWeapon)
        return classList[i]
      }
    }

  }

  $('#right-button').on('click', function() {

    $("#square" + moveCounter).removeClass("player")
    moveCounter += 1;
    $("#square" + moveCounter).addClass("player")


    getWeapon("#square" + moveCounter);

  });

#grid-box {
    width: 420px;
    height: 220px;
  }
  #grid-box>div.square {
    font-size: 1rem;
    vertical-align: top;
    display: inline-block;
    width: 10%;
    height: 10%;
    box-sizing: border-box;
    border: 1px solid #000;
  }


  .w1 {
    background: url(https://preview.ibb.co/ntRarR/watermark3.png) no-repeat center center;
    z-index: 0;
  }

  .player {
    background: url(http://placekitten.com/200/300) no-repeat 0 0;
    z-index: 1;
  }


  .w3 {
    background-color: blue;
  }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <div id="grid-box"></div>

  <button class="d-pad-button" id="right-button">Right button</button>