css 背景从 300px 开始重复答案

【问题标题】：css background repeating from 300px onwardscss 背景从 300px 开始重复
【发布时间】：2009-12-04 08:55:08
【问题描述】：

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

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

感谢您的任何建议！

【问题讨论】：

【解决方案1】：

将重复图案作为背景放到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 标签，但这是最简单的方法，不需要任何新的标记。

【讨论】：

【解决方案2】：

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

将整个页面放入另一个 <div> 容器中，或为其滥用 <html> 标签。
这意味着您为<body> 指定一个背景，为<html> 指定一个背景。
使用支持多个背景图像的 CSS3。并非所有常见浏览器都支持该功能。

【讨论】：

【解决方案3】：

是的，像往常一样指定你的背景图片，但是像这样设置background-position：

background-position:0 300px;

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

别忘了您可以使用FireBug 和FireFox 轻松诊断网站上的技术。

【讨论】：