在可点击的链接上覆盖透明图像

Question

我正在尝试创建一个带有透明图像的网页，该图像出现在文本和可点击链接的上方。这是我想要实现的效果的模型，这是当前网站的链接和repo。覆盖层是植物图像。

我可以想到几种方法来实现这个效果，但不确定最好的方法是什么。也许还有其他我没有考虑过的方法。以下是我正在考虑的方法：

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

2. 将植物图像叠加在文本上（也许使用z-index？），将导航菜单也作为图形放置在前面，然后使用图像映射选择链接。

如果有其他想法，将不胜感激。我的解决方案应该与通常的浏览器兼容（例如，IE> 7/8）。谢谢。

- CuriousYogurt

Answer 1

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

你只需将相同的背景图像应用于两个 div，浏览器会自动为你裁剪。你需要提供两个背景的完全正确的 px 偏移量。

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

这是第二个更好的演示，当你缩小窗口宽度时效果更佳：http://jsfiddle.net/zbZKG/1/

如果你使用带有一些透明度的 rgba 颜色来设置阴影，例如 rgba(0, 0, 0, 0.6)，那么 box-shadow 和植物的交互会更加愉悦。

- thirtydot

---

rgba在IE中不起作用，但您可以创建一个hack来使其起作用。 - L84

带有rgba的好主意。非常感谢您提供的解决方案。 - CuriousYogurt