CSS background-position 使用多个背景答案

【问题标题】：CSS background-position using multiple backgroundCSS background-position 使用多个背景
【发布时间】：2015-06-27 14:03:46
【问题描述】：

目前我正在使用多个背景来创建具有固定顶部和底部图像的面板，并且随着内容的继续，中心图像垂直重复。

<div style="
background-image: url(top.png), url(center.png), url(bottom.png);
background-position: top, center, bottom;
background-repeat: no-repeat, repeat-y, no-repeat;
width:242px;
">
fgffg<br />
fgffg<br />
fgffg<br />
fgffg<br />
fgffg<br />
fgffg<br />
fgffg<br />
fgffg
</div>

我遇到的问题是使用 no-repeat，repeat-y，no-repeat 底部图像被跳过。中心图像会重复到最后！

我需要弄清楚（并且优雅、干净地做）如何使中间部分在 y 轴上重复，但也为底部部分留出空间以很好地结束我的 div 块。

谢谢！

【问题讨论】：

标签： html css background

【解决方案1】：

可能问题出在中心图像占据了所有空间。

由于它在底部之上分层，因此使其不可见。

只需更改顺序：在第一个渲染层（列表中的最后一个！）中重复图像，然后是另一个 2

background-image: url(top.png), url(bottom.png), url(center.png);
background-position: top, bottom, center;
background-repeat: no-repeat, no-repeat, repeat-y;

Demo

【讨论】：

效果很好，谢谢和欢呼，这对我来说是一个很好的教训！
秩序和层级真的很有意义！
很高兴它有帮助！感谢@isherwood 的演示！

【解决方案2】：

图像被放置为浮动。当您放置顶部图像然后居中图像时，它会覆盖可用空间，而不会为底部图像留下空间。

因此，更改顺序非常有效。顶部和底部的图像放置不重复，然后剩余的空间用垂直重复的中心图像填充。

【讨论】：