背景样式详解
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的几个层级:从下到上排列:
- background-color
- background-image
- border
- content