题
我想知道是否有人知道如何实现以下目标 - 看看 http://www.dspts.si
屏幕的前 1/3 是空白背景,从那里开始应该有一个重复的图案。我现在就这样做了,创建了一个非常长的图案 png 并将其设置为偏移 300 并重复 x。然而,我对这个解决方案并不满意,因为如果页面变得比背景图像 png 长,它就会中断。
感谢您的任何建议!
解决方案
把重复图案作为背景来html
元件,然后为白色1px的* 300像素的图像作为背景图像body
元件,并且你所有的设置。
html, body {
height: 100%;
}
html {
background: url(dotted.png);
}
body {
background: url(white_1x300.png) 0 0 repeat-x;
}
您不必使用html
和body
标签对于这一点,但它是最简单的方法,并且不需要任何新的标记。
其他提示
您可以指定多个背景。看 我可以使用 CSS 获得多个背景图像吗?. 。其中提到的技术有:
- 将整个页面放入另一个页面
<div>
容器或滥用<html>
为它添加标签。
这意味着您指定了背景<body>
和一个用于<html>
. - 使用CSS3,支持多背景图片。尚未得到所有常见浏览器的支持。
不隶属于 StackOverflow