屏蔽背景图片,以便根据点击的位置链接到不同的页面

时间:2013-07-24 13:13:33

标签: html css image hyperlink masking

我正在创建一个网站,因为我是一个新的html,我希望我的所有主页都是一张背景图片占据了所有页面 - 上面有两个徽标 - 每个徽标,如果点击,会指示你到它的各个页面。

我知道您可以使用方框/圆形/多边形来屏蔽图片,然后点击图片的特定区域以转到链接,其他一些用于其他链接,如本教程中所示:http://www.tutorialspoint.com/html/html_image_links.htm < / p>

问题是,这需要你使用标签放入图片,我使用css代码,所以我可以用它作为背景图像:

<style type="text/css"> html { background: url('wp-content/uploads/2013/07/main_menuu-1024x1024.jpg') no-repeat center center fixed; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; } </style>

...我喜欢[contains]属性,因为它会自动调整所有视图和设备中的图像大小,所以有解决方法吗?

提前致谢。

更新

我的一位程序员朋友告诉我“使用锚点/显示块/绝对位置 使用左%,顶部%和宽度高度% 是 你是个家伙 并使用绝对定位锚 嗒嗒“

但他对此并不十分清楚。

1 个答案:

答案 0 :(得分:0)

Jeff和roboonus是对的。

如果您真的想要这样的东西,我建议您设置背景图片。并设置一个div,其中包含一个链接。

这是一个示例JSFIDDLE

使用这种结构,您可以在页面上放置所需的链接。