1

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

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

感谢您的任何建议！

4

3 回答 3

3

您可以指定多个背景。请参阅我可以使用 CSS 拥有多个背景图像吗？. 那里提到的技术有：

  • 将整个页面放入另一个<div>容器或滥用<html>标签。
    这意味着您为 指定一个背景，为 指定一个<body>背景<html>。
  • 使用支持多个背景图像的 CSS3。这还不是所有常见浏览器都支持的。
于 2009-12-04T10:05:48.467 回答
3

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

于 2009-12-04T10:08:49.883 回答
0

是的，将您的背景图像指定为正常，但设置background-position如下：

background-position:0 300px;

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

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

于 2009-12-04T08:57:40.903 回答