Question

我的图像是圆角矩形，我使用它作为背景的顶部和底部：

#content_top { /* 760px by 30px */
    background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 0 scroll;
    height: 10px;
}

#content_bottom { /* 760px by 30px */
    background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 -20px scroll;
    height: 10px;
}

然后我使用另一张1px高度的图像垂直重复以填充此div的背景之间的区域。像这样：

#content { /* 760px by 1px */
    background: #F7EECF url(images/content_body.png) repeat-y 0 0 scroll;
}

现在我想知道是否可以使用相同的图像（content_top_bottom.png），但只能使用它的一部分，以达到同样的效果？我尝试过类似的东西，但它不起作用：

#content { /* 760px by 1px */
    background: #F7EECF url(images/content_top_bottom.png) repeat-y 0 -5px scroll;
}

我想使用相同的图像，因为我想减少http请求的数量。 1px图像可能不会产生很大影响，但我只想尝试一下。有人可以帮忙吗？

Answer 1

将顶部，中部和底部放置在一起，使图像为2280 x 10。然后你可以重复中间部分：

#content_top {
  background: #F7EECF url(images/content_bg.png) no-repeat 0 0 scroll;
  height: 10px;
}

#content {
  background: #F7EECF url(images/content_bg.png) repeat-y -760px 0 scroll;
}

#content_bottom {
  background: #F7EECF url(images/content_bg.png) no-repeat -1520px 0 scroll;
  height: 10px;
}

Answer 2

我建议在整个网站上使用3张图片：

标准的非重复精灵。在您的情况下，这将是content_top_bottom.png（尽管重命名它可能更好，因此它更通用，可以用于其他部分。）
“repeat-x”图像。这将是1px宽的图像（或者更多，取决于设计）但非常高。在这里，你将所有图像水平重复。
“重复-y”图像，类似于＃2，除了1px高且非常宽。在这里，您可以放置content_body.png图片。

虽然在目前的情况下，这会导致2个HTTP请求，但它的可扩展性要高得多，因为您不会使用超过3个。不幸的是，对于平铺两个方向的背景，它们必须是个体的。

您可能还有兴趣阅读CSS3属性border-image，它允许您将一个图像用于完整元素。它还没有得到很好的支持，但希望它不会太长了！

CSS：是否可以仅重复部分图像以将其用作背景？

2 个答案: