1: background-color设置背景色
2、 设置背景图片
语法:background-image:url(./img) ;
_可以同时设置背景色,火绒背景图片,如果同时设置,背景色是在背景图下面
--图片在元素中的位置
如果背景图片大于元素,默认是显示图片的左上角
如果一样大,则正常全部显示
如果图片小于元素,则默认情况下,背景图片会平铺充满元素
background-image:url() ;
3、 background-repeat: no-repeat;设置背景图片重复的方式
可选值:
repeat 默认值 双方向重复
no-repeat 不重复,有多大就显示多大
repeat-x 水平方向重复
repea-y 垂直方向重复
background-repeat: no-repeat;
background-position: ;设置图片在元素中的位置
默认在元素的左上角
可选值:
1、 top right left bottom center中两个值
如果只写一个值,第二个值默认是center
2、也可以直接指定两个偏移量
第一个值,是水平的偏移量 可正(向右) 可负(向左)
第二个值,是垂直的偏移量 可正(向下) 可负(向上)
background-position: center;
5、 background-clip: ; 设置背景的范围
可选值:
border-box 默认值,背景色会出现在边框下面
padding-box 背景就不会出现边框下,出现在内容区和内边距区
content-box 背景图出现在内容区下面
background-clip: content-box;
6、 background-origin: ; 设置背景图片偏移量原点
一般情况下,配合 background-position使用
可选值:
border-box 从边框开始计算偏移量
padding-box 默认值,从内边距开始计算
content-box 从内容区开始计算偏移量
background-origin:content-box ;
7、 background-size: ; 设置背景图片的大小
1、参数:
第一个:宽度
第二个:高度
如果只写一个,第二个值,为auto
2、cover 图片的比例不变, 将元素充满
contain 图片比例不变,将元素完整显示
background-size: cover;
background简写方式
-这个属性可同时设置背景相关的所有样式
没有顺序要求,如果不写,就会使用默认值
-background-size 必须要写在background-position后面