使用css垂直重复调整大小的边框图像 [英] vertical repeating resizable border images using css

问题描述

我正在为一位朋友制作一个网页，而我的布局如下：有10％的边框，横幅和内容的中心区域为80％，右侧为10％的边框。

现在，不要让左侧和右侧区域为空，而是希望将图像向下重复，直到页面进入（每页可能会有所不同） 。我希望图像在调整窗口大小时调整大小（因此img大小将在10％区域中为100％）。

我添加了一个div并设置了float：left属性并设置了大小，这很棒，但是我无法重新获取图像。我也尝试将图像设置为背景图像，并将其重新设置，然后保持其原始大小。有没有办法让图像重复和调整大小？

感谢，
尼尔

解决方案

您可以重复使用css背景图片，但无法调整大小，据我所知。

显然，CSS3会为您提供一种指定背景图像大小的方法。您可以按像素，宽度和高度或以百分比指定此大小。以百分比形式指定大小时，大小与使用background-origin指出的区域的宽度或高度有关。但是，到目前为止，实现此功能的唯一浏览器是Opera 9.5，Safari 3，Konqueror和最新的firefox nightlies，它们使用-o-background-size，-webkit-background-size，-khtml-background-size和-moz例如，

  #myDiv {
 
 
您应该知道，这些并不是最常用的浏览器（如果您的浏览器不支持此功能） IE，chrome，FF）所以你现在不应该使用它。
 
I am making a web page for a friend and at the minute I have the layout as follows: there is a 10% border, 80% center area for the banner and content, and another 10% border on the right. 

Now instead of having the left and right areas empty I would like to have an image repeating down as far as the page goes (which will probably be different for each page). I would like the image to resize when the window is resized (so img size will be 100% in the 10% area). 

I have added a div and set the float:left properties and set the size and this is great but I can't get the image to repeat. I have also tried setting the image as a background image and that got it to repeat but then it stays its original size. Is there a way to get the image to repeat and resize?

Thanks,
Neil
解决方案
You can repeat a css background image but you can't resize, as far as I know.

Apparently, CSS3 gives you a way to specify the size of background images. You can specify this size in pixels, width and height, or in percentages. When you specify a size as a percentage, the size is relative to the width or height of the area that you have pointed out using background-origin. But, the only browsers having this feature implemented so far are Opera 9.5, Safari 3, Konqueror and the latest firefox nightlies, they use -o-background-size, -webkit-background-size, -khtml-background-size and -moz-background-size.

For example, 
#myDiv{background-size: 200px 50px}
As you should know, those aren't the most used browser (IE, chrome, FF are) So you shouldn't use this for now.

                        
这篇关于使用css垂直重复调整大小的边框图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！