我可以選擇透明圖像後面的元素嗎？

Question

我要取消選擇一個透明圖像來選擇元素背後，不使用propriety z-index，請幫幫我！這裏的Jsfiddle example。

謝謝！

Answer 1

難道你不能通過改變它的順序來把輸入帶到前面嗎？

HTML：

<input id="myinput" type="text" name="" value="SELECT ME PLEASE !"/> 
<div id="menulogo"><img src="http://www.marcellokabora.com/web/wokomoko/img/menulogo.png"/></div> 

CSS：

#myinput{ 
    position: absolute; 
    top: 130px; 
    left: 260px; 
    font-size: 20px; 
}​ 
​ 

的jsfiddle：http://jsfiddle.net/bW52t/

否則，使用pointer-events使元素 「點擊」

HTML：

<div id="menulogo"><img src="http://www.marcellokabora.com/web/wokomoko/img/menulogo.png"/></div> 
<input id="myinput" type="text" name="" value="SELECT ME PLEASE !"/> 

​ 

CSS：

#menulogo,#menulogo img{ 
    pointer-events: none; 
} 
#myinput{ 
    position: absolute; 
    top: 130px; 
    left: 260px; 
    font-size: 20px; 
}​ 

的jsfiddle：http://jsfiddle.net/2m4Tx/

Answer 2

那麼如果你有z-index的設置，我不認爲有由透明圖像元素訪問重疊的方式。當然，你可以寫一個簡短的JS，這將改變圖像的z-index值，或即將隱藏它，等等。但沒有編輯這個屬性，我認爲這是相當不可能的..

乾杯！

Answer 3

這是一個棘手的一個。即使在使用z-index的情況下嘗試設置圖像的索引時，使用較早的IE瀏覽器也會遇到問題。看來，像IE7瀏覽器忽略圖像的指數，即使它後面的輸入框（例如）。 最好的辦法是把圖像中的CSS一個div的背景圖像，並有絕對位置兩個元素。

<div style="position:absolute; background: url(images/myimage.jpg) no-repeat"></div> 
<div style="position: absolute; left : 15px"> 
    <input type="text" /> 
</div>