css 背景图片不变形

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%

你可能感兴趣的:(css)