Question

我想知道是否有人知道如何实现以下目标 - 请查看http://www.dspts.si

屏幕的前1/3处有一个空背景，从那时起应该有一个重复的图案。我现在就做了，通过创建一个非常长的模式png并将其设置为偏移300和repeat-x。但是，我对这个解决方案并不满意，因为如果页面的长度超过背景图像png，它将会中断。

感谢您的任何建议！

Answer 1

您可以指定多个背景。见Can I have multiple background images using CSS?。这里提到的技术有：

Answer 2

将重复图案作为背景添加到html元素，然后将白色1px * 300px图像作为背景图像添加到body元素，并且您已全部设置。

html, body {
    height: 100%;
}

html {
    background: url(dotted.png);
}

body {
    background: url(white_1x300.png) 0 0 repeat-x;
}

您不必为此使用html和body标记，但这是最简单的方法，不需要任何新标记。

Answer 3

是的，正常指定背景图片，但设置background-position如下：

background-position:0 300px;

这将使背景图像从左侧开始为0px，从顶部开始为300px。

我们不要忘记您可以FireBug使用FireFox轻松诊断网站上的技术。