Question

我有一个复杂的背景图像和图像，应该在背景图像的确切位置。

我如何组织网页？

我不能使用绝对位置，因为我需要组织背景以在任何监视器，任何分辨率和任何浏览器上查看它。它可以与中心对齐或与其他对齐。

网页只能使用 Javascript 或像 JQuery 这样的库来编写。

这是一个根据我想要的背景图像和图像组织的网页类型的示例。

http://desandro.com/portfolio/

（背景图片及其上的点）

提前致谢。

修改

我会在评论中添加我的答案。

背景将是一组圆形作为矩阵（m * n），拍摄图像（一个圆圈）并在页面上重复它，或者它将是一个背景图像，其上包含所有这些圆圈。但是这些圈子中的一些应该是单独的img，而不是背景部分，因此用户可以点击它们，但是他不应该填补任何差异，就好像所有圈子都是相同的类型，只是其中一些可点击。如果我可以安排它，那么按钮可以随机改变，这将是伟大的。希望，我清楚地解释了。

Answer 1

我认为你需要对如何处理这个问题采取不同的看法，你问题中的一些观点似乎被误导了。

如果是投资组合设计，就像链接的那样，那么你需要注意两件事：

网站截图是内容，不是表现。人们来到你的投资组合，看看你做了什么，重要的是你知道HTML img（内容）和背景图像（演示文稿）之间的差异。
如果你有图像比例，他们会在不同的分辨率下看起来很糟糕。如果您拉伸图像或缩小图像大小会使图像失真，这在投资组合中看起来并不是那么好看。我建议您务实并选择图片固定大小，这也有助于在图片上添加热点。这就是链接投资组合的作者如何处理事物，并附加一个背景图片来很好地分割页面。

另一件需要注意的事情是，链接的示例使用canvas来绘制点，因为连接每个点的线。 Canvas通过动态使这很容易，但是在IE中不支持而不使用插件。但是，如果您不需要经常更改这些点，那么只需使用图像和CSS即可获得类似的效果。

本答案的其余部分假设您使用的是HTML4 / XHTML。链接的示例使用HTML5（地方不正确），但没有特定要求使用此技术，我假设您没有使用HTML5。

首先，将每个图像和备注视为独立的内容块，包含在单个div中。如前所述，屏幕截图是一个内容图片，应该有自己的img标签。我还认为这些笔记是一个特定点的列表，因此它们应该被标记为。

<div class="article">
  <div>
    <img src="my_screenshot.png" alt="Appropriate alt text here" />
    <ul>
      <li class="note1">Here is an interesting part of the image</li>
      <li class="note2">This is also interesting</li>
      <li class="note3">Look at this! Pretty cool huh?</li>
    </ul>
  </div>
</div>

标记：完成。您可以将它用于每个部分，并根据需要简单地替换内容。如果您认为积分的顺序很重要，请将ul替换为ol。

接下来你想要考虑一下CSS。这只是让您入门的基础知识，应该足以让您指出正确的方向。您需要将div.article设置为相对位置，以便允许绝对子元素相对于该特定条目的左上角定位。同时设置包装器div的宽度，高度和居中（也设置img尺寸）。最后，您需要准备li注释以进行定位。

.article {position:relative}
  .article div{position:relative; width:800px; height:600px; margin:0 auto}
    .article img {display:block; width:800px; height:600px}
    .article ul,.article ul li {position:absolute; list-style:none; top:0; left:0; margin:0; padding:0}
    /* Debug styles */
      .article ul li {height:20px; width:20px; background-color:#ff0000}

现在只是为每个li绘制点的情况。使用图像编辑器计算每个点的左上角位置（以像素为单位），然后根据需要设置每个li.noteX。

.article ul li.note1{top:156px; left:89px}

这应该足以让你走上正确的道路。一旦你了解了这个，就可以开始为笔记和任何JavaScript添加工具提示等背景图像。至于在页面上使用多个条目，请为每个div.article提供一个唯一ID，并使用该ID更具体地定位li。

编辑： Live example只需要一点点JS来显示悬停。原谅缺乏实际图像，可怕的颜色应该足够直观;）

Answer 2

根据屏幕大小缩放复杂结构（例如背景图像和大量HTML元素），即使不是不可能，也很难用纯HTML实现。

您通常会有背景图片，例如在具有固定宽度的居中元素后面。该元素可以具有position: relative CSS属性，因此任何绝对定位的元素相对于该元素的左上角（而不是文档的左上角）定位。

这似乎是您链接到的网站的方式。当浏览器窗口的大小发生变化时，背景图像不会被缩放。

使用相对单位（left: 3.5%）缩放背景图像并在其上定位元素可能是可能的，但是不切实际。较旧的浏览器的图像缩放方法不是最佳的。（可以在更现代的浏览器中设置缩放方法。），我希望使用相对单位进行绝对定位时存在巨大的跨浏览器问题。

如果网页的背景很重要怎么办？

2 个答案: