使用 CSS 自动调整背景大小的图像映射答案

【问题标题】：Image-mapping on an automatically resizing background with CSS使用 CSS 自动调整背景大小的图像映射
【发布时间】：2010-06-03 06:03:00
【问题描述】：

我对 CSS 很陌生，我窃取了一些代码并让它以我想要的方式为我工作，在尝试了很多不同的方法来做我想做的事情之后，我有了一些了解想要但有点失落。

我想完全按照标题所说的那样做图像映射，同时允许我尝试实现的自动调整大小。显然，我试图让我的网站在大多数分辨率下看起来都不错，而不会影响我想要的设计。到目前为止，我的代码所在的网站如下：

我会用旧的 html 方式来做，但我不想要任何边框，这似乎不允许（因为你不能用背景图像映射）。

请帮忙，这让我发疯了

【问题讨论】：

标签： css

【解决方案1】：

不确定您是否可以使用图像映射来执行此操作，因为您必须将像素完美的坐标传递给区域标签。

但是，我建议为每个区域设置几个 a 标签。将每个链接设置为显示：块和大小并用百分比定位它们（就像你在“bg”类中所做的那样）。

例如，跨越整个页面的顶部标题的链接可能是这样的样式：

#home-link {
    display:block;
    width:90%;
    height:10%;
    position:absolute;
    top:2%;
    left:5%;
}

这只是一个例子，这些数字绝不是准确的。我只是将它们用于演示目的。您想要做的是对该图像进行一些测量，并计算出这些链接的尺寸和位置占整个文档的百分比。例如，如果一个链接距离顶部 100 像素，并且图像高 1000 像素，那么您应该将该链接的顶部属性设置为 10%。

希望这会有所帮助。

【讨论】：