css背景
1、背景颜色：半透明
2、背景图
属性名: background-image (bgi)
属性值:
background-image: url( 图片的路径)
注意点:
背景图片中url中可以省略引号
背景图片默认是在水平和垂直方向平铺的背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的。
/* 背景平铺:当多个命令时，使用最后一个命令 /
background-repeat: no-repeat;
/ 不重复 /
background-repeat: repeat;
/ 默认重复 /
/ 沿着x轴平铺 /
background-repeat: repeat-x;
/ 沿着y轴平铺 */
background-repeat: repeat-y;
默认完全平铺：
当background-repeat: no-repeat;不重复
当background-repeat: repeat-x;沿着x轴pingpu
当background-repeat: repeat-y;沿着y轴平铺
3、背景位置
当有二个数时，先左右，再上下
当只有一个数时，如果是left、center、right，则另一个方向默认居中
如果是top、center、bottom，则另一个方向默认居中
当background-position: right;水平方向右对齐，竖直方向居中
当background-position: top ;水平方向居中，垂直方向置顶
正数：向右向下移动 负数：向左向上移动
背景色和背景图只显示在盒子里面
例如：background-position: -100px -100px;
4、背景连写
5、img和背景的区别
需求:需要在网页中展示一张图片的效果?
方法一:直接写上img标签即可
img标签是一个标签，不设置宽高默认会以原尺寸显示
方法二:div标签+背景图片
需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
6、精灵图背景
精灵图一般用行内标签— span 、b 、i
场景:项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点:减少服务器发送次数，减轻服务器的压力，提高页面加载速度
例如:需要在网页中展示8张小图片
8张小图片分别发送一发送8次
合成一张精灵图发送一发送1次
简单操作：
创建一个盒子设置盒子的尺寸和小图尺寸相同
1.将精灵图设置为盒子的背景图片
2.修改背景图位置
通过测量小图片左上角坐标，分别取负值设置给盒子的background-position: xy
背景大小 background-size
作用:设置背景图片的大小
语法: background-size: 宽度 高度;取值:
| 取值 | 场景 |
|---|---|
| 数字+px | 简单方便，常用 |
| 百分比 | 相对于当前盒子自身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，可能会出现空白 |
| cover | 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 |
-->