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

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

<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，不重复底部图像被跳过。中心图像重演到最后！

我需要找出（并做到这一点优雅，干净）如何使由y轴中间部分重演，但也留下空间，底部很好地结束我的div块。

谢谢！

来源

2015-06-26 user3212534

可能问题来自占据所有空间的中心图像。

由于它位于底部以上，所以不可见。

只要改变顺序：（！最后一个在列表中）重复图像中的所述第一渲染层然后其他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

来源

2015-06-26 21:07:04 vals

工作得很好，感谢和欢呼，这对我来说是一个教训！ – user3212534

顺序和层次真的很有意义！ – user3212534

快乐，它帮助！并感谢@isherwood的演示！ – vals

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

因此，改变顺序工作得很好。顶部和底部的图像放置为无重复，然后剩余的空间用垂直重复的中心图像填充。

来源

2015-06-27 06:03:46

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

回答

相关问题