半透明レイヤーですが、下位レイヤーに移動します

Question

半透明のイメージが私のWebページのすべてに重ねて表示されますが、ユーザーは下のフォーム入力とテキストフィールドをクリックすることができます。ユーザーは上部の画像レイヤーとやりとりしません。

私は画像を作成し、Photoshopで不透明度を調整できると思っています。その後、適切なz-インデックスを持つdivにpngを配置します。しかし、ユーザーのクリックはその下のレイヤではなく、そのトップdivに移動します。

私はここからやりたいことがいくつかありますか、それとも希望の効果を達成するための別の方法がありますか？

私はちょうどhtml、css、jsで作業しています。サーバー側のものはありません。ありがとう！画像/ divのクリックスルーのために

Answer 1

逆の考え方が考えられます。上に要素を、後ろに画像を配置します。

コンテナのフォーム要素を白い背景でカプセル化し、このコンテナ要素の不透明度を調整します。画像をコンテンツの背後に置き、絶対配置を使用してそれを他のDOMレイアウトから分離します。

<div id="image" style="background: url(...); position:absolute; top: 0; left: 0; width: 100%; height: 100%;"></div> 
<div id="content-container" style="background: #fff; opacity: .6;"> 
    <!-- form elements, etc --> 
</div> 

ブラウザのデフォルトイベント処理と闘うことなく、あなたが望む効果に近づけることができます。

Answer 2

、この答えを確認してください。

Click through a DIV to underlying elements

。

引用コード：

CSS

pointer-events:none; 
background:url('your_transparent.png'); 

IE条件

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', 

sizingMethod = '規模'）。 背景：なし！重要;

すべてのコードを含む基本的な例のページです。

http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html

更新：

あなたは（質問は、それはIEでなく、Firefoxで動作しますAYS）IE用Make overlay background click-through-ableからこの技術http://jsfiddle.net/jpCfz/6/とそれを組み合わせることができ、またはあなたが必要があるかもしれません上に引用した以外のClick through a DIV to underlying elements答えに記述されているJavaScriptのビット。

アップデート2：

多分あなたは、このようにそれを行うには十分な理由を持っているので、私はこれを開くにはしたくなかったが、他の回答で述べたように、明らかに、あなたは、背景画像を使用して検討すること代わりに不透明度（代わりに画像がその上にないコンテンツの下にあるため）をクリックすることについて心配する必要はありません。あなたのケースでこれが可能なら、それに行きなさい。