我有三张背景图片，全宽643px。我希望他们的陈述如下：
-
顶部图像（12px高度）无重复
-
中间图像重复-y
-
底部图像（12px高度）无重复
如果不让它们重叠（这是一个问题，因为图像是部分透明的），我似乎无法做到这一点，这样的事情可能吗
背景图像：url（top.png），
url（bottom.png），
url（middle.png）；
背景重复：不重复，
不要再说了，
重复-y；
背景位置：左0上-12px，
左0底-12px，
左0上0；
无论你的代码最初填充到哪里，都要重复该代码。因此，它与您的顶部和底部重叠
一种解决方案是将重复背景推入一个伪元素，该伪元素通过顶部和底部的12px定位在容器之外。结果可以在这里看到（演示中的不透明度只是为了显示没有重叠）。如果没有不透明度，请参见此处。相关代码（在CSS3浏览器中测试：IE9、FF、Chrome）：
CSS
div{
位置：相对位置；
z指数：2；
背景：url（top.png）左上角不重复，
url（bottom.png）左下角不重复；
}
部门：以前{
内容：''；
位置：绝对位置；
z索引：-1；/*将其推到后台*/
顶部：12px；/*将其放置在顶部背景之外*/
右：0；
底部：12px；/*将其放置在底部背景之外*/
左：0；
背景：url（middle.png）左上角repeat-y；
}
如果您需要或想要IE8支持（不支持多个背景），那么您可以将顶部背景放在主div中，并使用位于容器底部的div:after伪元素将底部背景放在主div中