css中background简写属性
在CSS2.1⾥，background属性的简写⽅式包含五种属性值，从CSS3开始，⼜增加了3个新的属性值，加起来⼀共8个。
CSS2.1
background-color使⽤的背景颜⾊。
background-image使⽤的背景图像。
background-repeat如何重复背景图像。
background-attachment背景图像是否固定或者随着页⾯的其余部分滚动。
background-position背景图像的位置。
CSS3
background-size背景图⽚的尺⼨。默认值：'auto'  其他值：像素，百分⽐，contain，cover
background-origin背景图⽚的定位区域。 默认值：'padding-box'        'border-box' 、'content-box'(定义背景图⽚绘制的开始点)
background-clip背景的绘制区域。 默认值：'border-box'      还有'padding-box'、'content-box'(定义背景绘制的开始点)
简写⽅式：
background:background-color background-image background-repeat background-attachment background-position / background-size background-origin background-clip
不设置的属性可以省略
background-Origin属性指定background-position属性应该是相对位置。
注意
1、如果背景图像background-attachment是"固定"，background-origin属性没有任何效果。
2、background-origin 和background-clip很容易混淆，前者是对背景图⽚⽽⾔，后者是对背景⽽⾔。
不是⼀个概念。clip默认值⽐origin默认值范围⼤，所以默认不会有裁剪效果，如果想设置裁剪，可以把origin范围设置的⽐clip⼤就好。⽐如：origin:'border-box',clip:'padding-
box'或者'content-box'.
3、background-size中contain和cover的区别。
cover此时会保持图像的纵横⽐并将图像缩放成将完全覆盖背景定位区域的最⼩⼤⼩。完全覆盖，可能有图⽚显⽰不完整的情况。
contain此时会保持图像的纵横⽐并将图像缩放成将适合背景定位区域的最⼤⼤⼩。可能有空⽩区域
如下图⼀设置的contain，图⼆设置的cover
css中的position属性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。