CSS background-position 使用多个背景

Question

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

<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 轴重复，而且 为底部留下 space 很好地结束我的 div 块。

谢谢！

Answer 1

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

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

只需更改顺序：在第一个渲染层（列表中的最后一个！）中重复图像，然后在另一个 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

Answer 2

图像以浮动形式放置。当您放置顶部图像然后放置中心图像时，它覆盖了 space 个可用图像，没有为底部图像留下 space。

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

CSS background-position 使用多个背景

CSS background-position using multiple background

html

css

background