html - 使用CSS的垂直重复可调整大小的边框图像

Question

我正在为 friend 制作一个网页，此时我的布局如下:有 10% 的边框，80% 的中心区域用于横幅和内容，另外 10% 的边框在右侧。

现在，我不想让左右区域为空，而是让图像在页面进行时一直向下重复(每个页面可能会有所不同)。我希望在调整窗口大小时调整图像大小(因此 img 大小将在 10% 区域中为 100%)。

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

谢谢， 尼尔

Answer 1

据我所知，您可以重复 css 背景图像，但不能调整大小。

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

例如，

#myDiv{background-size: 200px 50px}

如您所知，这些浏览器并不是最常用的浏览器(IE、chrome、FF 是)，所以您现在不应该使用它。