我想知道如果任何人知道如何实现以下 - 看看http://www.dspts.siCSS背景从300像素重复起
屏幕的前1/3有一个空的背景,并从那里开始应该有一个图案重复。我现在通过创建一个很长的模式png并将其设置为抵消300和repeat-x。然而,我对这个解决方案并不满意,因为如果页面比png背景图片长,它会中断。
感谢您的任何建议!
我想知道如果任何人知道如何实现以下 - 看看http://www.dspts.siCSS背景从300像素重复起
屏幕的前1/3有一个空的背景,并从那里开始应该有一个图案重复。我现在通过创建一个很长的模式png并将其设置为抵消300和repeat-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
标签对于这一点,但它是最简单的方法,并且不需要任何新的标记。
是,指定背景图像正常,但设置background-position
这样的:
background-position:0 300px;
这将使在0像素的背景图像开始从左边,并从顶部300像素。
你能继续使用repeat -y吗? – xtofl 2009-12-04 08:59:00
啊公平点:D,没有发现那个http://www.dspts.si/用了一个很长的很薄的图片重复。 我的不好 – 2009-12-04 09:01:17
是的,好吧,这是我现在所做的与立场。如果我做了重复 - 它会出于某种原因环绕,我也会在顶部有模式。 :( – 2009-12-04 09:05:50
您可以指定多个背景。请参阅Can I have multiple background images using CSS?。该技术提到的有:
<div>
容器或滥用<html>
标签吧。 <body>
的背景和<html>
的背景。
只有1张图片是不可能的? – xtofl 2009-12-04 10:54:38
不,因为你不能用元素来伪造白色的300px高的区域,而且你不能将图片合并为html背景需要重复。 – 2009-12-04 11:45:34
谢谢你这个作为魅力工作! – 2009-12-05 20:32:29