06-背景样式详解

背景样式详解

background的几点总结

注意：background的size和position数据与margin的不同了，前边数据代表水平方向，后边数据代表垂直方向

background-repeat-x	no-repeat	x方向不重复y可重复
background-repeat	no-repeat-x/no-repeat-y	道理同上
background-size	cover/contain/数字1 数字2	cover含义：图片覆盖盒子，三条边贴合，所以盒子不会留下空白，相当于100% auto contain含义：盒子包含图片，三条边贴合（俩条我认为也对，上下边贴合就行）保证图片完全显示，相当于auto 100%
background-position	数字1 数字2 /left right top bottom 选二	百分比的时候，盒子的长度减去图片的长度再乘以百分比，负数左移，正数右移
background-attachment	fixed/scroll	假设Body盒子里有个div盒子，俩者各有一个背景图片，如果把俩个盒子的背景图片都固定住，那么div盒子的背景图片就会与div盒子脱离，就剩个框，（当然可以设置背景颜色和其它），只有当这个div框移动到这个div背景图片在的位置时，这个div背景图片才会有效果。因为div的背景图片和body的背景图片没有直接关系，需要盒子做媒介。
background-origin	border-box/padding-box/content-box	这里修改的是图片等的起始位置，默认起始位置是border与padding的交界处，但是可以修改，border-box从border处起始，padding-box从padding处起始，但若不是no-repeat为前提，所有地方依然都会有图片的，只不过平移了一点
background-clip	border-box/padding-box/content-box	裁切的只是背景，div盒子不会改变，裁切后，该裁切掉的部分背景颜色设置的是transparent,不可以设置数值
background	color image repeat attachment position/size	此为background的复合性写法，1. color和image二者至少有一个 2.position和size要用/隔开，不然无法区别，因为单位一样3.有/必须后面跟数据，不写/最多俩个数据4.关于position只写一个数据，第二个数据会默认auto，但我们自己写的时候不能写auto，写了报错，只能写0等数字

注：背景图片可以写多张背景图片，用逗号隔开每个url，先写的url的图片在上

Go:由背景图片引入我们的渐变

bacground的几个层级：从下到上排列：

1. background-color
2. background-image
3. border
4. content