CSS 多张背景图片定位

Multiple background images positioning

提问by Juddling

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

我有三个背景图片，宽度都是 643px。我希望它们是这样设置的：

• top image(12px height) no-repeat

• middle imagerepeat-y

• bottom image(12px height) no repeat

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

• 中间图像重复-y

• 底部图像（12px 高度）没有重复

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;

回答by ScottS

Your problem is that the repeat-yis going to fill the whole height, no matter where you position it initially. Thus, it overlaps your top and bottom.

您的问题是repeat-y无论您最初将其放置在何处，都将填充整个高度。因此，它与您的顶部和底部重叠。

One solution is to push the repeating background into a pseudo element positioned off of the container by the 12pxat 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):

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

CSS

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:afterpseudo element positioned to the bottom of the container.

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

回答by kizu

If you can add padding/borders to the block equal to the backgrounds you want to position without overlapping other block, you can use the background-clip& background-originto position the top and bottom backgrounds over the paddings/borders, and the repeating background over the content/paddings+content.

如果您可以将填充/边框添加到等于您要定位的背景而不与其他块重叠的块，则可以使用background-clip&background-origin将顶部和底部背景定位在填充/边框上，并将重复背景定位在内容/填充上+内容。

Here is an example: http://dabblet.com/gist/2668803

这是一个例子：http: //dabblet.com/gist/2668803

For your code, you'll possibly need to add something like this:

对于您的代码，您可能需要添加如下内容：

padding: 12px 0;
background-clip: padding-box, padding-box, content-box;
background-origin: padding-box, padding-box, content-box;

or

或者

border: solid transparent;
border-width: 12px 0;
background-clip: border-box, border-box, padding-box;
background-origin: border-box, border-box, padding-box;

And you'll get what you need. If you can't get the paddings/borders, the pseudo-element like ScottS mentioned would work perfectly.

你会得到你需要的。如果您无法获得内边距/边框，那么像 ScottS 提到的伪元素就可以完美地工作。

回答by Patrick R

Try do it like this:

尝试这样做：

 background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat;
    }

EDIT: Was just an example, but here's the css with your css:

编辑：只是一个例子，但这是你的 css 的 css：

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

回答by user2585434

I actually found a simpler fix, because I was having this same issue with a horizontal navigation.

我实际上找到了一个更简单的解决方法，因为我在水平导航方面遇到了同样的问题。

Rather than adding code like the other answers you just have to list it differently in your CSS. The center image that repeats needs to be listed last, not first or second.

而不是像其他答案那样添加代码，您只需在 CSS 中以不同的方式列出它。重复的中心图像需要列在最后，而不是第一个或第二个。

In my code it looks like this:

在我的代码中，它看起来像这样：

background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif);
background-position: left, right, center;
background-repeat: no-repeat, no-repeat, repeat-x;

回答by Kevin Struillou

A radical but effective way to deal with this, if:

一种激进但有效的方法来解决这个问题，如果：

1. you want to apply backgrounds with no overlapping to a ":before"
2. the ":before" element as a known max height

1. 你想应用不重叠的背景到 ":before"
2. ":before" 元素作为已知的最大高度

---

---

&:before {
    background: url('vertical-line.png') no-repeat 0px,
                url('vertical-line-repeat.png') no-repeat 140px,
                url('vertical-line-repeat.png') no-repeat 200px,
                url('vertical-line-repeat.png') no-repeat 260px,
                url('vertical-line-repeat.png') no-repeat 320px,
                url('vertical-line-repeat.png') no-repeat 380px,
                url('vertical-line-repeat.png') no-repeat 440px,
                url('vertical-line-repeat.png') no-repeat 500px,
                url('vertical-line-repeat.png') no-repeat 560px,
                url('vertical-line-repeat.png') no-repeat 620px,
                url('vertical-line-repeat.png') no-repeat 680px,
                url('vertical-line-repeat.png') no-repeat 740px;
}

回答by WantToDo

to use backgroud-position with 2 arguments, must to Write in extended writing backgroud-position-xand backgroud-position-y

要使用带有 2 个参数的背景位置，必须以扩展写作backgroud-position-x和backgroud-position-y

background-position-x: left 0;
background-position-y: top -12px, bottom -12px, top 0;

回答by arttronics

Here's a method that uses 3 div's for each of the Top, Middle, and Bottomimages that are transparent to apply to your webpage.

这是一种方法，该方法对Top、Middle和Bottom图像中的每一个使用 3 div，这些图像是透明的以应用于您的网页。

Background wallpaper is optional.

背景墙纸是可选的。

Tested in modern browsers and is IE8 friendly.

在现代浏览器中测试并且对 IE8 友好。

This method allows you to treat the bodyelement as it should be treated, i.e., your webpage markup does notneed to be in a wrapper or containing element.

这种方法可以让你对待身体因素，因为它应及时治疗，即您的网页标记并没有需要在包装或含有元素。

jsFiddle Example
jsFiddle Example with centered filled

jsFiddle 示例
jsFiddle 示例，居中填充

Since the above example uses image place holder content that is without transparency for Top and Bottom images, you can verify markup works with transparency with this jsFiddle that uses mini transparent icons in repeat mode HERE.

由于上面的示例使用顶部和底部图像不透明的图像占位符内容，您可以使用此 jsFiddle 验证标记是否具有透明度，该 jsFiddle 在重复模式下使用迷你透明图标HERE。

回答by dda

The only (practical, non hair-threatening) way I see is do do that in Javascript, when the page has loaded, and when it is resized, with a canvas sized to fit the innerHeight and the 3 images: draw the first one once at the top, draw the second as many times as required to cover the remainder of the canvas, and draw the 3rd one at the bottom of the canvas. Position the canvas at 0,0 with a ridiculously negative z-index.

我看到的唯一（实用的，非头发威胁的）方法是在 Javascript 中执行此操作，当页面已加载并调整大小时，使用大小适合内部高度和 3 个图像的画布：绘制第一个图像一次在顶部，根据需要多次绘制第二个以覆盖画布的其余部分，并在画布底部绘制第三个。使用可笑的负 z-index 将画布定位在 0,0。

I had a go at it with 3 images (643 x 12, 100 and 12) and of course the first issue I saw is that the 3rd image is drawn over part of the last iteration of the 2nd image -- unless you have a window height of exactly 12+12+(p2.height*X), you'll have some overlap. But that's expected, right?

我尝试了 3 张图像（643 x 12、100 和 12），当然我看到的第一个问题是第三张图像是在第二张图像的最后一次迭代的一部分上绘制的——除非你有一个窗口高度正好是 12+12+(p2.height*X)，你会有一些重叠。但这是意料之中的，对吧？

回答by jay

I think z-indexwill fix this because z-indexonly affects CHILD elements, meaning you can't mess up anything else on the page that uses z-index.

我认为z-index会解决这个问题，因为z-index只影响 CHILD 元素，这意味着您不能在使用z-index.

top and bottom images z-index:3;

顶部和底部图像 z-index:3;

middle image z-index:2;background-repeat:repeat-y;

中间图像 z-index:2;background-repeat:repeat-y;