我有三个背景图片，所有的宽度643px。我想让他们这样安排：
> top image(12px height)no-repeat
>中间图像重复
>底部图像(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;
解决方法
你的问题是，重复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伪元素放置到底部的容器底部背景。
