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>

我遇到的问题是使用无重复，重复y，无重复的底部图像是SKIPPED。中心图像重复到最后！

我需要弄清楚（并且优雅，干净地）如何使中间部分通过轴y重复自身，而且为底部留出空间以便很好地结束我的div块。

谢谢！

Answer 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

Answer 2

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

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

使用多个背景的CSS背景位置

2 个答案: