css - 使用 CSS 在自动调整大小的背景上进行图像映射

Question

我是 CSS 的新手，我窃取了一些代码并使它以我想要的方式为我工作，在尝试了许多不同的方法来做我想做的事情后，我已经有了一些理解想要但有点迷路。

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

http://blunderphonics.0sites.net

我会用旧的 html 方法来完成它，但我不想要任何边框，这似乎不允许(因为你不能用背景制作图像 map )。

请帮忙，这让我很生气

Answer 1

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

但是，我建议为每个区域添加一个 a 标签。将每个链接设置为显示: block 和大小并使用百分比定位它们(​​就像您在“bg”类中所做的那样)。

例如，跨越整个页面的顶部标题的链接可能采用如下样式:

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

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

希望这对您有所帮助。