在可点击链接上叠加透明图像

Question

我正在尝试创建一个带有透明图像的网页，该网页显示在文本和可点击链接之上。我希望它看起来像Here is the mockup，here is the current site和the repo。叠加层是植物图像。

我可以想到一些可以做到这一点的方法，但我不确定最好的方法。也许还有另一种我没有考虑过的方式。以下是我正在考虑的事情：

1. 非常小心地剪裁植物图像，使其显示为黄色背景的图像，然后植物的其余部分显示为内部框架背景的一部分。

2. 在文本上叠加植物图像（可能使用z-index？），使导航菜单也成为图形（因此它显示在前面），然后使用图像映射来选择链接。

任何其他想法将不胜感激。我的解决方案应该与通常的浏览器嫌疑人兼容（例如，IE＆gt; 7/8）。谢谢。

Answer 1

您可以选择第一个选项，但不必剪辑图像。

您只需将相同的背景图片应用于div，浏览器就会为您剪裁剪辑。您必须为两个背景提供完全正确的px偏移量。

这是一个非常粗略的演示：http://jsfiddle.net/zbZKG/

这是第二个在缩小窗口宽度时效果更好的方法：http://jsfiddle.net/zbZKG/1/

box-shadow如果您使用rgba颜色并且阴影具有透明度，rgba(0, 0, 0, 0.6)和植物将会更愉快地互动。