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

Question

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

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

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

2. 将植物图像覆盖在文本上(也许使用 z-index？)，将导航菜单也制作成图形(因此它出现在前面)，然后使用图像映射来选择链接。

任何其他想法将不胜感激。我的解决方案可能应该与通常的浏览器兼容(例如，IE > 7/8)。谢谢。

Answer 1

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

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

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

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

box-shadow 和植物会更愉快地互动，如果你使用 rgba 颜色和阴影的一些透明度，有点像 rgba(0 , 0, 0, 0.6).