响应式布局技巧之图片

需求

一张很复杂的背景图，要求头部和尾部以及四周都要良好的显示在网页内（包含移动端），同时网页不定高，中间有动态内容列表。

方法：

将图片切成3份，头部、中间（1px，进行Y方向平铺）、和尾部。使用css3的多个背景图

background-image: url('bg-top.png'), url('bg-bottom.png'), url('bg-repeat.png');
background-repeat: no-repeat, no-repeat, repeat-y; // 第三张图平铺
background-position: center 0, center bottom, center; // bottom那张图靠底部，平铺的图使用center 居中，填补空隙
background-size: contain, contain, contain; // 图片都是等比例缩放

Lenny-Hu / note

响应式布局技巧之图片 #81

需求