我有三幅背景图片，所有宽643px的。 我希望他们设置了如下所示：
顶部图像 （12像素高度）不重复
中间图像重复-Y
底部图像 （12像素高度）没有重复
我似乎无法做到这一点，而不让他们重叠（这是一个问题，因为图像是部分透明的），是这样的可能吗？
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的顶部和底部。 结果在这里可以看到 （在演示透明度只是表明没有重叠回事）。 如果没有透明度， 在这里看到 。 相关的代码（在浏览器CSS3测试：IE9，FF，铬）：
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;
你会得到你所需要的。 如果你不能得到的垫衬/边框，就像提到斯科特伪元素会很好地工作。
尝试做这样的：
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是友好的。
这种方法可以让你把身体因素，因为它应及时治疗，即您的网页标记并不需要在包装或含有元素。
的jsfiddle例
的jsfiddle实施例具有中心填充
由于上面的例子中使用的图像占位符的内容是不透明度顶部和底部的图像，你可以验证标记工作的透明度与此的jsfiddle在重复模式使用小型透明图标的位置 。
唯一的（实际的，非发威胁）的方式我看到的是不这样做，在JavaScript中，当页面加载，并在调整大小时，用帆布调整大小以适应innerHeight和3张图片：一次绘制的第一个在顶部，绘制第二多次，需要以覆盖画布的其余部分，并绘制在画布的底部的第三之一。 在0,0画布用可笑的负z索引位置。
我曾在一搏与3幅影像（643×12，100和12），当然我看到的第一个问题是，第三图像绘制在第二图象的最后一次迭代的一部分 - 除非你有一个窗口高度正好12 + 12 +（p2.height * X），你就会有一些重叠。 但是，这预期的，对不对？
我想z-index会解决这个问题，因为z-index仅影响子元素，这意味着你不能搞砸任何使用网页上其他z-index 。
顶部和底部的图像z-index:3;
中间图像z-index:2; background-repeat:repeat-y;
使用研究背景位置以2个参数，必须以书面形式延长写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;
}
