css background

一、background-repeat

设置是否及如何重复背景图像。

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

二、background-position

背景图像的起始位置。背景图像如果要重复，将从这一点开始。

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

center

三 、background-size

指定背景图片大小。

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

四、 background-size值为cover、100%和contain的区别

4.1 在no-repeat的情况下

• cover：图片宽高比不变,铺满整个容器的宽高,图片多出来的部分会裁掉
• contain：图片宽高比不变 ,缩放至图片完全展示出来（图片放大至满足背景区域的最小边即止）,所以会有留白区域
• 100% 100%：按容器⽐例撑满，图⽚变形。

4.2 在repeat情况下

• cover：图片宽高比不变,铺满整个容器的宽高,图片多出来的部分会裁掉
• contain：容器至少有一张完整的图,留白区域则平铺背景图,铺不下的再裁掉
• 100% 100%：按容器⽐例撑满，图⽚变形。

4.3 当为百分比的时候，100%和100%，100%也会显⽰不⼀样的效果：

• background-size: 这个属性有两个值，第⼀个值为x轴⽅向的缩放⽐例或者px,第⼆个值为y轴⽅向的缩放⽐例或者px。

ps: 如果只写⼀个值，则第⼆个值默认为auto(根据图⽚原来的⽐例，以及现有的宽度，来确定⾼度)。

⽐⽅说：你有⼀张长宽⽐例为4:3的图⽚，有⼀个width:100px;height:50px;的盒⼦(也就是长宽⽐例为2:1)。

background-size:100% 100%;这种⽅式设置完背景图⽚的⼤⼩后，会完全铺满整个盒⼦，并且背景图⽚的⽐例会因此改变为2:1。

background-size:100%;这种⽅式设置的背景图⽚的⼤⼩,x轴会和盒⼦⼀样的宽，但是y轴由于默认为auto，根据上⾯的理论计算得背景图⽚的
⾼度为300px,但是盒⼦只有50px⾼，超出的部分隐藏，所以看两种写法的效果⾃然就不⼀样啦。

• 第⼀种效果你⼀定会看到完整的背景图⽚，但是有可能被挤压(失去图⽚原来的⽐例)
• 第⼆种效果你不⼀定能看到完整的图⽚，但是图⽚的⽐例没有发⽣变化。

五、 参考

• cssbackground-size，100%和cover的区别
• backgroundSize设置cover和contain的区别
• background-size值为cover、100%和contain的区别