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精灵图

他说一种图像的合成技术

作用

减少请求次数，降低服务器处理压力

怎样使用

他需要配合背景图片和背景定位来使用

H5前端开发学习笔记——0x12CSS背景和精灵图