多个背景图像定位(Multiple background images positioning)

多个背景图像定位(Multiple background images positioning)

我有三张背景图片，全部宽度为643px。 我希望他们能像这样出发：

顶部图像 （12px高度）无重复

中间图像重复-y

底部图像 （12px高度）不重复

我看不到它们没有让它们重叠（这是一个问题，因为图像是部分透明的），是这样的可能吗？

background-image: url(top.png), url(bottom.png), url(middle.png); background-repeat: no-repeat, no-repeat, repeat-y; background-position: left 0 top -12px, left 0 bottom -12px, left 0 top 0;

I've got three background images, all of width 643px. I want them to be set out like so:

top image (12px height) no-repeat

middle image repeat-y

bottom image (12px height) no repeat

I can't seem to do it without getting them to overlap (which is a problem because the images are partially transparent), is something like this possible?

background-image: url(top.png), url(bottom.png), url(middle.png); background-repeat: no-repeat, no-repeat, repeat-y; background-position: left 0 top -12px, left 0 bottom -12px, left 0 top 0;

最满意答案

你的问题是repeat-y会填满整个高度，无论你最初的位置在哪里。 因此，它与您的顶部和底部重叠。

一种解决方案是将重复背景推入位于容器顶部和底部12px的伪元素。 结果可以在这里看到 （演示中的不透明只是为了表明不存在重叠）。 没有不透明， 看到这里 。 相关代码（在CSS3浏览器中测试：IE9，FF，Chrome）：

CSS

div {
    position: relative;
    z-index: 2;
    background: url(top.png) top left no-repeat, 
                url(bottom.png) bottom left no-repeat;
}

div:before {
    content: '';
    position: absolute;
    z-index: -1; /* push it to the background */
    top: 12px; /* position it off the top background */
    right: 0;
    bottom: 12px; /* position it off the bottom background */
    left: 0;
    background: url(middle.png) top left repeat-y;
}
 
 如果您需要或希望获得IE8支持（不支持多种背景），那么您可以将顶部背景放在主div中，并使用div:after将底部背景放入div:after位于容器底部的伪元素div:after 。 
Your problem is that the repeat-y is going to fill the whole height, no matter where you position it initially. Thus, it overlaps your top and bottom.
 
One solution is to push the repeating background into a pseudo element positioned off of the container by the 12px at the top and bottom. The result can be seen here (the opacity in the demo is just to show that there is no overlap going on). Without opacity, see here. The relevant code (tested in CSS3 browsers: IE9, FF, Chrome):
 
CSS
 
div {
    position: relative;
    z-index: 2;
    background: url(top.png) top left no-repeat, 
                url(bottom.png) bottom left no-repeat;
}

div:before {
    content: '';
    position: absolute;
    z-index: -1; /* push it to the background */
    top: 12px; /* position it off the top background */
    right: 0;
    bottom: 12px; /* position it off the bottom background */
    left: 0;
    background: url(middle.png) top left repeat-y;
}
 
If you needed or wanted IE8 support (which does not support multiple backgrounds), then you could put the top background in the main div, and put the bottom background in by using the div:after pseudo element positioned to the bottom of the container.