如何將特定的覆蓋圖像帶到前景

Question

我準備了一個JSFiddle here來解釋我的問題。

我試圖做到：

• 我想提出一個網格出的是左浮動
• 每個PNG 4周透明正方形的PNG是可點擊的標籤複選框
• 當框被點擊PNG的不透明度應該改變以顯示它的活動
• 網格層應該位於「背景圖像」之上
• 「背景圖像」是動態加載的，因此它不能使用CSS
• 「背景圖片」是一個獨立的div與電網的給定方position:absolute
• 用戶點擊
• 用戶提交包含複選框信息（從點擊框）形式

我的問題：

• 沒有「背景圖像」腳本按預期工作
• 「背景圖像」它sta在前臺YS，當我點擊它激活圖像本身，使其成爲半透明

我的問題：

• 我怎麼把PNG廣場到前臺，使他們是可以點擊的變化在不透明的情況下，用戶沒有與「背景圖像」交互？

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順序/ z-index的 的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 2

提高您的選擇有所幫助。即使使用「label> img」也會阻止背景圖像被嵌入點擊事件。

基本上任何css選擇器參數都可以用於jQuery，所以當你告訴它你正在監聽的時候更具體一些。