1、cover 最短边完全显示
background: url('') no-repeat top center;
background-size: cover;
2、container最长边完全显示
background: url('') no-repeat top center;
background-size: container;
3、背景图铺满不动
background: url('../images/bg.png') no-repeat top center;
background-size: cover;
background-attachment: fixed;
4、缩写
background: url('../images/bg.png') bottom center/cover fixed; // 垂直靠下 左右居中 cover 固定定位
background: url() center top/contain no-repeat #F7F7F7;
背景图片定位写法
- 左右布局 上下布局 / 宽度 高度
1.居中占满
cener / cover
2.左右居中 垂直靠下 contain显示
center bottom / contain
3.距左10% 距上20% 宽80% 高60%
10% 20% / 80% 60%