我有三张背景图片，全宽643px。我希望他们像这样出发：
如果不让它们重叠（这是一个问题，因为图像是部分透明的），我似乎无法做到这一点，这样的事情可能吗？
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将填满整个高度，无论你最初在哪里定位它。因此，它与您的顶部和底部重叠。
一种解决方案是通过顶部和底部的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伪元素放置底部背景。
如果你可以为块添加填充/边框等于你想要定位的背景而不重叠其他块，你可以使用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提到的伪元素将完美地工作。
尝试这样做：
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;
}
我实际上发现了一个更简单的修复，因为我在水平导航时遇到了同样的问题。
而不是像其他答案一样添加代码，你只需要在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;
这是一种方法，它为每个顶部，中间和底部图像使用3个div，这些图像是透明的，可应用于您的网页。
背景壁纸是可选的。
在现代浏览器中测试并且IE8友好。
此方法允许您处理应该处理的body元素，即，您的网页标记不需要在包装器或包含元素中。
jsFiddle Example jsFiddle Example with centered filled
由于上面的示例使用的图像占位符内容对于顶部和底部图像没有透明度，因此您可以使用此重复模式HERE中使用迷你透明图标的jsFiddle验证标记是否具有透明度。
我看到的唯一（实用的，非头发威胁）方式是在Javascript中，当页面加载时，以及调整大小时，使用适合innerHeight和3个图像的画布：绘制第一个一次在顶部，根据需要绘制第二个以覆盖画布的其余部分，并在画布的底部绘制第三个。将画布定位在0,0，并使用可疑的负z-index。
我有3个图像（643 x 12,100和12），当然我看到的第一个问题是第三个图像是在第二个图像的最后一次迭代的一部分上绘制的 - 除非你有一个窗口高度正好是12 + 12 +（p2.height * X），你会有一些重叠。但那是预期的，对吧？
我认为z-index会解决这个问题，因为z-index只影响CHILD元素，这意味着你不能搞砸使用z-index的页面上的任何其他内容。
顶部和底部图像z-index:3;
中间图像z-index:2; background-repeat:repeat-y;
要使用带有2个参数的backgroud-position，必须写入扩展写作backgroud-position-x和backgroud-position-y
background-position-x: left 0;
background-position-y: top -12px, bottom -12px, top 0;
如果出现以下情况，一种彻底而有效的方法
:before”: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;
}