背景
1 背景颜色
2 背景图片
3 背景平铺
4 背景位置
5 背景相关属性连写
6（拓展）img标签和背景图片的区别
1 背景颜色
属性名：background-color
取值；关键字、rgb表示法、rgba表示法、十六进制
注意：
1 背景颜色默认值是透明：rbga(0,0,0,0)、transparent
2 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
2 背景图片
属性名：background-image
取值：url("图片路径")
注意：
1 背景图片中url中可以省略引号
2 背景图片默认是在水平和垂直方向平铺的
3 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
3 背景平铺
属性名：background-repeat
取值：
1 repeat 水平和垂直方向都平铺(默认)
2 no-repeat 不平铺
3 repeat-x 水平平铺
4 repeat-y 垂直平铺
4 背景位置
属性名：background-position
取值：background-position:水平方向 垂直方向；
1 方位名词(两两组合可以表示9个位置)
水平方向 左(left) 中(center) 右(right)
垂直方向 上(top) 中(center) 下(bottom)
2 数组+px(坐标表示)
原点(0,0) 盒子的左上角 x轴 y轴
注意：数值为正 正方向移动，数值为负 反方向移动
注意：无论是背景图片还是背景颜色都只在盒子里显示
5 背景相关属性连写
属性名：background
连写：background：color image repeat position
注意：
1 单个属性值的合写，取值之间以空格隔开
2 书写顺序不分先后，但推荐上述写法
3 取值个数可以按照需求省略
4 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()
6（拓展）img标签和背景图片的区别
需求：需要在网页中展示一张图片的效果？
方法一：直接写上img标签即可
img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二：div标签 + 背景图片
需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
使用：
不经常更换的用背景图
经常更换的用img图片
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { /* 盒子宽800px 高800px */ width: 800px; height: 800px; /* 字体大小 50px */ font-size: 50px; /* 背景色 pink */ /* background-color: pink; */ /* 背景图 1.jpg */ /* background-image: url("images/1.jpg"); */ /* 背景平铺 默认 */ /* background-repeat: no-repeat; */ /* 背景图位置 居中 */ /* background-position: center center; */ /* 连写 颜色 图片 平铺 位置 */ background: pink url("images/1.jpg") no-repeat center; } </style> </head> <body> <div> 背景Demo </div> </body> </html>效果图：
