在可点击的链接上覆盖透明图片 [英] Overlay transparent image over clickable links

问题描述

我正在尝试创建一个带有透明图片的网页，显示在文字和可点击链接的上方。 这里是模型，我想让它看起来像，和此处是当前网站和回购。重叠是植物图像。

我可以想到几个方法，这可以做，但我不确定最好的方法。也许还有另一种我没有考虑的方式。这是我想做的事：

1. 非常仔细地剪下植物图像，




2. 将植物图像覆盖在文本上（可能使用z -index？），使导航菜单也是一个图形（因此它出现在前面），然后使用图像映射来选择链接。

任何其他想法将非常感谢。我的解决方案应该可能与常见的浏览器可疑（例如，IE> 7/8）兼容。谢谢。

解决方案

您可以选择第一选项，但不必剪辑图片。 p>

您可以简单地将相同的背景图像应用于 div ，并且浏览器会为您处理剪辑。您必须为两个背景提供正确的 px 偏移。

这是一个非常粗略的演示： a href =http://jsfiddle.net/zbZKG/ =nofollow> http://jsfiddle.net/zbZKG/

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

box-shadow ，如果您使用 rgba 阴影有一些透明度的颜色，像 rgba（0，0，0，0.6）

I'm trying to create a web page with a transparent image that appears overtop of text and clickable links. Here is the mockup that I want it to look like, and here is the current site and the repo. The overlay is the plant image.

I can think of a few ways this can be done, but I'm not sure the best way to do it. Perhaps there's another way I haven't considered too. Here is what I'm thinking about doing:

1. Clip the plant image very carefully so that it appears as an image with a yellow background, and then the rest of the plant appears as part of the background of the internal frame.

2. Overlay the plant image on the text (perhaps using z-index?), make the navigation menu a graphic as well (so it appears in front), and then use image mapping to select the links.

Any other ideas would be greatly appreciated. My solution should probably be compatible with the usual browser suspects (say, IE > 7/8). Thank you.

解决方案

You can go for option number one, except that you don't have to clip the image.

You can simply apply the same background image to both divs, and the browser will take care of the clipping for you. You'll have to provide exactly correct px offsets for the two backgrounds.

Here's a very rough demo: http://jsfiddle.net/zbZKG/

Here's a second one that works better when you reduce the window width: http://jsfiddle.net/zbZKG/1/

The box-shadow and the plant would interact more pleasantly if you used an rgba colour with some transparency for the shadow, something vaguely like rgba(0, 0, 0, 0.6).

这篇关于在可点击的链接上覆盖透明图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！