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

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;
}