在可點擊的鏈接上覆蓋透明圖片

Question

我正在嘗試創建一個網頁，其中顯示的文字和可點擊鏈接超出了透明圖片。我希望它看起來像Here is the mockup，而here is the current site和the repo。覆蓋圖是植物圖像。

我可以想出幾種方法可以做到，但我不確定最好的方法來做到這一點。也許還有另一種我沒有考慮過的方式。非常仔細，使其出現

1. 剪輯植物圖像作爲圖像黃色背景，然後將設備的其餘部分出現的背景的一部分：這裏就是我想這樣做內部框架。

2. 在文本上覆蓋植物圖像（可能使用z-index？），使導航菜單也是圖形（所以它出現在前面），然後使用圖像映射來選擇鏈接。

任何其他的想法將不勝感激。我的解決方案應該與通常的瀏覽器嫌疑人兼容（比如IE> 7/8）。謝謝。

Answer 1

除了不必剪切圖像之外，您可以選擇第一個選項。

您可以簡單地將相同的背景圖像應用於div s，並且瀏覽器將爲您處理剪裁。您必須爲兩個背景提供完全正確的px偏移量。

這裏是一個非常粗略的演示：http://jsfiddle.net/zbZKG/

下面是當你縮小窗口寬度效果更好的第二個：http://jsfiddle.net/zbZKG/1/

的box-shadow，如果你使用的rgba色彩搭配，該廠將互動更舒服一些透明度的影子，有點像rgba(0, 0, 0, 0.6)。