多背景图片定位 [英] Multiple background images positioning

问题描述

我有三个背景图片，宽度均为 643 像素.我希望它们是这样排列的:

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

• 顶部图片(12px 高度)无重复

• top image (12px height) no-repeat

中间图片重复-y

底部图片(12px 高度)无重复

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 将填满整个高度，无论您最初将其放置在何处.因此，它与您的顶部和底部重叠.

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.

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

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

如果您需要或想要 IE8 支持(不支持多背景)，那么您可以将顶部背景放在主 div 中，并使用 div:after 将底部背景放入位于容器底部的伪元素.

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.

这篇关于多背景图片定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！