Html CSS：是否可以仅重复图像的一部分以将其用作背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1250011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Is it possible to repeat only part of an image to use it as a background?
提问by fei
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_bottom.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 的图像可能不会产生很大的影响，但我只是想尝试一下。任何人都可以帮忙吗？
回答by Guffa
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;
}
回答by DisgruntledGoat
I would suggest using 3 images, across the site:
我建议在整个网站上使用 3 张图片：
- Standard non-repeating sprites. This would be the
content_top_bottom.pngin your case (though it may be better to rename it so it's more generic and can be used for other parts). - 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.
- A "repeat-y" image, similar to #2 except 1px tall and very wide. Here you would put your
content_body.pngimage.
- 标准的非重复精灵。这将是
content_top_bottom.png您的情况（尽管重命名它可能会更好，因此它更通用并且可用于其他部分）。 - “重复-x”图像。这将是一个 1px 宽（或多一点，取决于设计）但非常高的图像。在此，您将放置所有水平重复的图像。
- “repeat-y”图像，与#2 类似，除了1px 高且非常宽。在这里你可以放置你的
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 toolong!
您可能还有兴趣阅读 CSS3 属性border-image，它允许您将一个图像用于一个完整的元素。它还没有得到很好的支持，但希望它不会太长！
