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

Question

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

如何组织网页？

我无法使用绝对位置，因为我需要组织背景以便在任何显示器，任何分辨率和任何浏览器上查看它。它可以对齐中心或其他人。

网页可以只写Javascript或与像库JQuery。

下面是一个什么样的网页根据背景图像和图像组织我想要的一个例子。

http://desandro.com/portfolio/

（背景图片，点就可以了）

预先感谢。

编辑

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

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

Answer 1

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

如果它是一个组合的设计，像一个链接，那么你需要知道两两件事：

1. 的网站截图是内容，而不是表象。人们来到您的投资组合以查看您所做的工作，了解HTML img（内容）和背景图像（演示文稿）之间的差异非常重要。
2. 如果您具有图像缩放比例，它们在不同的分辨率下看起来会很糟糕。如果您拉伸图像或缩小图像尺寸，会扭曲图像，这在投资组合上看起来不太好。我建议你务实，并选择你的图片是固定的大小，这也有助于在图片顶部添加热点。这就是关联投资组合的作者如何处理事情，并附加一张背景图片来很好地分割页面。

要注意的另一件事是，链接的示例使用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.noteX。

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

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

编辑：Live example与微小的JS显示盘旋。原谅缺乏实际的图像，可怕的颜色应该是足够的视觉;）

Answer 2

根据屏幕尺寸缩放复杂结构（例如背景图像和大量HTML元素）在纯HTML中非常困难（如果不是不可能的话）。

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

这似乎是您链接的网站的方式做到这一点。当浏览器窗口的大小改变时，背景图片不会被缩放。

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