CSS:可以只重复图片的一部分作为背景吗?

i have an image that is a rounded corner rectangle, i use it for the top and bottom part of the background by using:

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

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

then i use another 1px height image to repeat vertically to fill the area in-between for this div's background. like this:

然后，我使用另一个1px高的图像垂直重复，以填充此div背景的中间区域。是这样的:

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

now i wonder is it possible to just use the same image (content_top_bottom.png), but only part of it, to achieve the same effect? i tried something like this, but it didn't work:

现在我想知道是否可以只使用相同的图像(content_top_end .png)，但只使用其中的一部分，以达到同样的效果?我尝试过类似的方法，但没有用:

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

i want to use the same image because i want to reduce the number of http request. the 1px image is probably not gonna have a great impact, but i just want to try. anyone can help?

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

2 个解决方案

#1

Make the image 2280 x 10 by placing the top, middle and bottom parts beside each other. Then you can repeat the middle part:

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

#2

I would suggest using 3 images, across the site:

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

Standard non-repeating sprites. This would be the content_top_bottom.png in your case (though it may be better to rename it so it's more generic and can be used for other parts).
标准的无重复精灵。这将是content_top_bottom。png在您的例子中(尽管重命名它可能更好，这样它更通用，可以用于其他部分)。
A "repeat-x" image. This would be an image 1px wide (or a little more, depending on the design) but very tall. In this you'd put all images that repeat horizontally.
“repeat-x”形象。这是一个1px宽的图像(或者更多一点，取决于设计)，但是非常高。在这里，你将所有的图像水平重复。
A "repeat-y" image, similar to #2 except 1px tall and very wide. Here you would put your content_body.png image.
一个“重复-y”图像，除了1像素高和非常宽之外，类似于#2。在这里，您将放置content_body。png图像。

Although in your current case this results in 2 HTTP requests, it's a lot more scalable because you won't use more than 3. Unfortunately for backgrounds that tile both directions, they have to be individual.

尽管在当前情况下，这将导致2个HTTP请求，但它的可伸缩性要大得多，因为您不会使用超过3个。不幸的是，对于两个方向的背景，他们必须是独立的。

You may also be interested to read about the CSS3 property, border-image, which will allow you to use one image for a complete element. It's not well supported yet but hopefully it won't be too long!

您可能还对CSS3属性border-image感兴趣，它允许您为一个完整的元素使用一个映像。它还没有得到很好的支持，但希望不会太长!

#1