Question

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

热门图片 （12px身高）无重复
中间图片 repeat-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;

Answer 1

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

一种解决方案是通过顶部和底部的12px将重复背景推入位于容器外的伪元素。 The result can be seen here（演示中的不透明度只是为了表明没有重叠）。没有不透明度，see here。相关代码（在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＆amp; 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友好。

此方法允许您处理正文元素，因为它应该被处理，即您的网页标记不需要在包装器或包含元素中。< / p>

jsFiddle Example
jsFiddle Example with centered filled

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

Answer 6

我看到的唯一（实用，非头发威胁）方式是在Javascript中，当页面加载时，以及调整大小时，使用适合innerHeight和3个图像的画布：绘制第一个在顶部，根据需要绘制第二个以覆盖画布的其余部分，并在画布的底部绘制第三个。将画布定位在0,0，带有可疑的负z-index。

我有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

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

您想要将不重叠的背景应用于＆＃34; :before＆＃34;
＆＃34; :before＆＃34;元素作为已知的最大高度

&: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;

多个背景图像定位

9 个答案: