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

问题描述

我有三个背景图片，宽度为643像素。 （12像素高度）：

）no-repeat

/ li>

底部图片（12像素高度）无重复

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

  background-image：url（top.png），
 url（bottom.png），
 url ; 
 
 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

$ b b

  div {
 position：relative; 
 z-index：2; 
 background：url（top.png）left left no-repeat，
 url（bottom.png）left left no-repeat; 
} 
 
 div：before {
 content：''; 
 position：absolute; 
 z-index：-1; / * push它到背景* / 
 top：12px; / *将它关闭顶部背景* / 
 right：0; 
 bottom：12px; / *将其置于底部背景* / 
 left：0; 
 background：url（middle.png）top left repeat-y; 
} 
  

如果您需要或希望IE8支持（不支持多背景）那么您可以将顶部背景放在主div中，并通过使用位于容器底部的 div：之后的伪元素放置底部背景。

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

解决方案

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.

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