css 背景从 300px 开始重复

StackOverflow https://stackoverflow.com/questions/1845714

  •  12-09-2019
  •  | 
  •  

题

我想知道是否有人知道如何实现以下目标 - 看看 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，支持多背景图片。尚未得到所有常见浏览器的支持。

是的，按正常方式指定背景图像，但设置 background-position 像这样：

background-position:0 300px;

这将使背景图像从距左侧 0 像素、距顶部 300 像素的位置开始。

我们不要忘记您可以使用 火虫 和 火狐 轻松诊断网站上的技术。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top