多个背景图像定位

Question

我有三个背景图像，全都为643px。 我希望将它们设置为：

• 顶部图片 （高度12 像素 ）不可重复

• 中间图像 重复

• 底部图片 （高度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;

Answer 1

您的问题是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伪元素将底部背景放入。

Answer 2

如果您可以在与要定位的背景相同的块上添加填充/边框，而不会与其他块重叠，则可以使用background-clip和background-origin在填充/边框上放置顶部和底部背景，然后重复内容/填充+内容的背景。

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

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

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

要么

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

您将得到所需的东西。 如果您无法获得填充物/边框，则提到的类似ScottS的伪元素将非常适用。

Answer 3

尝试这样做：

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

编辑：这只是一个例子，但这是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;
        }

Answer 4

实际上，我发现了一个更简单的修复程序，因为水平导航存在相同的问题。

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

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

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;

Answer 5

这是一种对顶部 ， 中间和底部图像使用3 div的方法，这些图像是透明的，可应用于您的网页。

背景墙纸是可选的。

经过现代浏览器测试，对IE8友好。

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

jsFiddle示例
居中填充的jsFiddle示例

由于上面的例子使用图像占位符的内容是不透明度顶部和底部的图像，你可以验证标记具有透明度的作品与此的jsfiddle在重复模式使用小型透明图标的位置 。

Answer 6

我看到的唯一（实用，不威胁头发的方法）是在Javascript中执行此操作，即在页面加载后以及页面调整大小时，使用画布大小调整为适合innerHeight和3张图像：绘制第一个图像一次在顶部，根据需要绘制第二遍，以覆盖画布的其余部分，并在画布底部绘制第三遍。 将画布的Z索引设置为负数，将其设置为0,0。

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

Answer 7

我认为z-index将解决此问题，因为z-index仅影响CHILD元素，这意味着您无法弄乱使用z-index的页面上的其他内容。

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

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

Answer 8

一种根本但有效的解决方案，如果：

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

Answer 9

要使用带有2个参数的backgroud-position，必须以扩展编写backgroud-position-x和backgroud-position-y编写

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