CSS背景和精灵图
- 课时94 背景颜色(掌握)
- 课时95 背景图片(掌握)
- 课时96 背景平铺(掌握)
- 课时97 背景定位上(掌握)
- 课时98 背景定位下(掌握)
- 课时99 背景关联和缩写(理解)
- 课时100 背景图片和插入图片区别(掌握)
- 课时101 背景图片练习(理解)
- 课时102 CSS精灵图(掌握)
- 课时103 精灵图练习(理解)
背景颜色
也就是属性background-color，他就是专门用来设置标签的背景颜色的
取值：同color属性
背景图片
即background-image: url();属性
他是专门用来设置背景图片的
注意点
1.图片地址必须放在url的那个括号中，可为本地的，也可为网络的；
2.若图片大小小于标签大小，图片会在水平和垂直方向平铺；
3.若网页上出现了图片，浏览器会再次发送请求来获取图片。
背景平铺
即background-repeat属性,他就是控制背景图片平铺的方式
取值
- repeat —— 水平垂直都平铺
- no-repeat —— 水平垂直都不需要平铺
- repeat-x —— 水平平铺
- repeat-y —— 垂直平铺
应用场景
通过背景图片的平铺，降低网页的大小，提高网页的访问速度
背景定位
哦补充一点，同一标签课同时设置背景颜色和背景图片，且图片覆盖颜色；
background-position属性就是控制背景图片位置的属性
格式
background-position: 0 0；
取值
- 具体的方位名词
- 水平方向：left、center、right
- 垂直方向：top、center、bottom
- 默认是left和top
- 具体的像素
- 5px 1.1em啥的，随便写
- 一定要写单位，不写无效，毛效果都没有
- 可以写负值，可以让图片移出去
注释
通过具体方位控制的时候，以左上角为原点，x越往右越大，y越往下越大
背景关联和缩写
格式
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
注意点
1，background属性中的任何属性都可以省略，只要一个就行
关联方式
默认情况下，背景图片会随着滚动条的滚动而滚动，若不想滚动，就可以修改背景图片和滚动条的关联方式，这里使用background-attachment属性
赋值
- scroll 默认，随着滚动条滚动而滚动
- fixed 反之
背景图片和插入图片区别
补充
要想快速生成box1到4，如下操作
div.box$*4
他俩的区别
- 背景图片仅仅是一个装饰，不占用位置。插入图片会占用位置
- 背景图片有定位属性，可以轻易控制图片位置；插入图片则没有，所以控制其位置就很麻烦
- 插入图片的语义比背景图片语义强，企开中，若你的图片想被搜索引擎收录，就是用插入图片
CSS精灵图
他说一种图像的合成技术
作用
减少请求次数，降低服务器处理压力
怎样使用
他需要配合背景图片和背景定位来使用
