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

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绘制点的情况.使用图像编辑器计算每个点的左上角位置(以像素为单位),然后li.noteX根据需要进行设置.

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

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

编辑: 用一小部分JS显示悬停的实例.借口缺乏实际图像,可怕的颜色应该足够直观;)