hooyantsing's Blog

P53_3_背景重复与尺寸定制

字数统计: 145阅读时长: 1 min
2020/04/13

P53 3 背景重复与尺寸定制

background-position

控制背景图片所在位置

1
2
3
4
//居中 | 右上
background-position: center | top right
//居中 x值 y值
background-position: 50% 50%;

background-size

背景图尺寸

图片可能会变形

contain

682072a715aa7633450418b673a55722.png

1
2
3
4
5
6
7
8
//x值 y值
background-size: 100% 100%;
//防止变形,只设定其中一个值,另一个为auto
background-size: 300px auto;
//图片完全覆盖空间,如果图片大于空间,会有部分图片内容丢失(被隐藏)
background-size: cover;
//保证图片完全显示出来,但可能不符合空间比例就会有留白
background-size: contain;
CATALOG