背景图片 backgruond 详解

background-image

background-repeat:

值	描述
repeat	这是默认值。如果背景图片比容器小，将在垂直和水平方向进行重复
repeat-x	背景图片只在水平方向重复
repeat-y	背景图片只在垂直方向重复
no-repeat	背景图片将只显示一次，不重复

background-position:

值	描述
top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom right	左侧两个元素为一组一起出现，分别代表垂直和水平布局 比如： background-position: top left; 效果等于 background-position-x: left; background-position-y: top; 如果只写一个关键词，那么另一个关键词默认是center
x% y%	第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。如果只写一个值，另一个值将是 50%。
xpx ypx	第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0，单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果只写一个值，另一个值将是50%

background-size:

值	描述
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
xpx ypx	手动设置宽度和高度
x% y%	手动设置宽度和高度相对于容器的百分比

cover 就是满足图片长宽中较小的一方撑满屏幕。 contain 就是满足图片长宽中较大的一方撑满屏幕。

background 合并写法