Question

我准备了JSFiddle here来解释我的问题。

我想要完成的事情：

我正在制作四个透明方形PNG中的网格，它们向左浮动
每个PNG都可以点击作为复选框的标签
当点击一个方框时，PNG的不透明度应该改变以显示它的活动
网格图层应位于＆＃34;背景图像＆＃34;
＆＃34;背景图片＆＃34;是动态加载的，因此无法使用CSS
＆＃34;背景图片＆＃34;是一个单独的div position:absolute
用户点击网格的给定方格
用户提交包含复选框信息的表单（来自点击框）

我的问题：

没有＆＃34;背景图片＆＃34;该脚本按预期工作
使用＆＃34;背景图片＆＃34;它保持在前景中，当我点击它时激活图像本身，使其半透明

我的问题：

如何将PNG方块带到前台，这样它们就可以点击并改变不透明度，用户没有与＆＃34;背景图像进行交互＆＃34;？

HTML

<div class="wrapper">
  <span>
      <label for="R0_C0">
          <img src="http://i.stack.imgur.com/EWwTE.png">
    </label>
    <input type="checkbox" name="R0_C0" value="1" class="hidden_checkbox" id="R0_C1">
  </span>
  <span>
      <label for="R0_C1">
          <img src="http://i.stack.imgur.com/EWwTE.png">
    </label>
    <input type="checkbox" name="R0_C1" value="1" class="hidden_checkbox" id="R0_C1">
  </span>
  <span>
      <label for="R1_C0">
          <img src="http://i.stack.imgur.com/EWwTE.png">
    </label>
    <input type="checkbox" name="R1_C0" value="1" class="hidden_checkbox" id="R1_C0">
  </span>
  <span>
      <label for="R1_C1">
          <img src="http://i.stack.imgur.com/EWwTE.png">
    </label>
    <input type="checkbox" name="R1_C1" value="1" class="hidden_checkbox" id="R1_C1">
  </span>
</div>

<!-- comment/remove code below this line to see the expected behavior -->

<div class="bg_img">
  <img src="http://i.stack.imgur.com/4bVu3.jpg" />
</div>

CSS

.wrapper {
  width: 64px
}

span {
  float: left
}

.hidden_checkbox {
  display: none
}

.selected_checkbox {
  opacity: 0.5;
}

.bg_img {
  position:absolute
}

JS

  $(function() {
    $('img').click(function() {
      $(this).toggleClass('selected_checkbox');
    });
  });

Answer 1

使用z-index来帮助指定您希望图片在后台，如下所示：

.bg_img {
    position:absolute;
    z-index: -1;
}

更新小提琴：https://jsfiddle.net/u177yr8z/3/
有关z-order / z-index的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 2

改善选择器会有所帮助。即使使用“label＆gt; img”也会阻止背景图像被用于点击事件。

基本上任何css选择器参数都可以与jQuery一起使用，所以当你告诉它你正在听什么时，更具体一点。

如何将特定的叠加图像带到前台

2 个答案: