使用css垂直重复可调整大小的边框图像答案

【问题标题】：vertical repeating resizable border images using css使用css垂直重复可调整大小的边框图像
【发布时间】：2010-09-28 21:06:53
【问题描述】：

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

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

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

谢谢，尼尔

【问题讨论】：

请为这个元素发布你的 CSS。

标签： html css

【解决方案1】：

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

显然，CSS3 为您提供了一种指定背景图像大小的方法。您可以以像素、宽度和高度或百分比为单位指定此大小。当您将大小指定为百分比时，大小相对于您使用背景原点指出的区域的宽度或高度。但是，目前唯一实现此功能的浏览器是 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 都是）所以你现在不应该使用它。

【讨论】：

【解决方案2】：

试试：

.myClass
{
   background-repeat: repeat-y;
}

将它添加到您的 div 的规则中，这将作为背景重复，但要调整它的大小，您可以使用 CSS3（目前还不太支持）：

.myClass
{
   background-size: 100px 500px
}

或使用您最喜欢的图像编辑软件将其缩小:)

【讨论】：

【解决方案3】：

恐怕不会。重复只能使用背景图像，但它们不允许指定大小。使用 CSS3，您可以使用 background-size，但目前许多浏览器还不支持。

大多数设计师通过使图像的内侧与背景颜色混合来解决这个问题。

【讨论】：