クリック可能なリンク上のオーバーレイ透明イメージ

Question

テキストとクリック可能なリンクの上に表示される透明なイメージを持つWebページを作成しようとしています。 Here is the mockupのように見せてください。here is the current siteとthe repoです。オーバーレイは植物イメージです。

私はこれを行うことができるいくつかの方法を考えることができますが、私はそれを行う最良の方法は不明です。おそらく私も考慮していない別の方法があります。ここで私がやって考えているものです：

1. それは黄色の背景で画像として表示され、その後、植物の残りの部分は、背景の一部として表示されるように、非常に慎重に植物の画像をクリップ内部フレーム。

2. 植物イメージをテキスト上に重ねて表示します（おそらくz-インデックスを使用しますか？）、ナビゲーションメニューも同様にグラフィックにしてください（前に表示されるように）。イメージマッピングを使用してリンクを選択します。

その他のアイデアは大変ありがたいです。私の解決策は、通常のブラウザの容疑者（IE> 7/8）と互換性があるはずです。ありがとうございました。

Answer 1

オプション番号1に進むことができますが、画像をクリップする必要はありません。

divに同じ背景画像を適用するだけで、ブラウザがあなたのためにクリッピングを処理します。 2つのバックグラウンドに対して、正確に正しいオフセット値（px）を指定する必要があります。ここで

は非常にラフなデモです：http://jsfiddle.net/zbZKG/1/

box-shadowとあなたとrgba色を使用した場合、植物はより愉快に相互作用する：http://jsfiddle.net/zbZKG/

ここでは、ウィンドウの幅を縮小するとき、より良い作品もう一つはですぼんやりとした何かの影は、rgba(0, 0, 0, 0.6)のようなものです。