Html CSS：是否可以只重复图像的一部分作为背景？

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

#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\u top\u bottom.png），但只使用其中的一部分，以达到相同的效果？我试过这样的方法，但没用：

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

---

我想使用相同的映像，因为我想减少http请求的数量。1px图像可能不会有太大的影响，但我只是想试试。任何人都可以帮忙吗？

将图像的顶部、中部和底部放在一起，制作成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;
}

---

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

标准非重复精灵。在您的情况下，这将是

content\u top\u bottom.png

（尽管重命名它可能会更好，这样它更通用，可以用于其他部分）

“重复x”图像。这将是一张1px宽（或稍大一点，取决于设计）但非常高的图像。在这里，你要把所有的图像水平重复

“重复y”图像，类似于#2，除了1倍高和非常宽。在这里，您可以放置您的

内容\u body.png

图像

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

---

您可能还想了解CSS3属性，它允许您使用一个图像作为完整的元素。它还没有得到很好的支持，但希望不会太长

+1:太好了！删除我的答案（上面说无法完成）。为什么要投否决票？如果你不说你不喜欢什么，那是毫无意义的。。。