简体繁体 English

CSS 背景-重复图像的特殊间隔

[英]CSS Background-Repeat special interval of image

原文 2011-06-09 13:55:56 8 2 css/ background-image/ repeat

I've got a simple question:) Hopefully.我有一个简单的问题:) 希望。

So, I wan't to repeat a website-background-image with CSS.所以，我不想用 CSS 重复网站背景图像。 But not pixel by pixel - no - pixelinterval by pixelinterval.但不是逐个像素 - 不 - 逐个像素间隔。 For example I want to repeat pixel 0 to 100 of my background image each time it is needed on the y-axis.例如，每次需要在 y 轴上时，我想重复背景图像的像素 0 到 100。

For normal, if i had a background image to repeat with the dimensions of 1000*1 px, CSS would display this image each pixel-line in the browser, until it's not needed anymore.正常情况下，如果我有一个背景图像以 1000*1 像素的尺寸重复，CSS 将在浏览器中的每个像素行中显示该图像，直到不再需要它为止。 Now, if I put in a 1000*10 px image, CSS would repeat the image as long as there is the need of it PLUS only as long as there is content to display on.现在，如果我放入一个 1000*10 像素的图像， CSS会重复该图像，只要有需要，只要有内容要显示。 That means, if there is (for example) no text to be displayed anymore, the browser would stop displaying the image, even if there were only 1000*5 px of the image displayed.这意味着，如果（例如）不再显示文本，浏览器将停止显示图像，即使显示的图像只有 1000*5 像素。

What I want is to display the full image, even if there is no content displayed on it.我想要的是显示完整的图像，即使上面没有显示内容。 That means if the 1000*10 px image is repeated, it's displayed by it's full size.这意味着如果重复 1000*10 像素的图像，它会以全尺寸显示。 Everytime 1000*10 px - never less.每次 1000*10 像素 - 永远不会少。

Is it possible to archieve that somehow?有可能以某种方式存档吗？

thanks:)谢谢：）

2 个解决方案

I'm not sure there's a way to do this with pure html/css that would work cross-browser, but you could look to javascript to calculate the height of your container, and work backwards from there, explicitly setting the min-height to a set interval as you'd like...我不确定有没有一种方法可以使用纯 html/css 来跨浏览器工作，但是您可以查看 javascript 来计算容器的高度，然后从那里向后工作，明确地将最小高度设置为你想要的设定间隔......

You can put all of your content in one DIV.Add your img-background style to this DIV.您可以将所有内容放在一个 DIV 中。将您的 img-background 样式添加到此 DIV。 Then with javascript you must get the height of your content, add 5px and round number to 0. Then add the new height to the DIV.然后使用 javascript 您必须获取内容的高度，将 5px 和整数添加到 0。然后将新高度添加到 DIV。