Question

我正在为一位朋友制作一个网页，我的布局如下：边框有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 -background尺寸。

例如，

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

你应该知道，那些不是最常用的浏览器（IE，Chrome，FF）所以你现在不应该使用它。

Answer 2

尝试：

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

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

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

或使用您喜欢的图像编辑软件将其缩小：）

Answer 3

我不敢。只能对背景图像进行重复，但不允许指定大小。使用CSS3，您可以使用background-size，但许多浏览器都不支持。

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

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

3 个答案: