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；

取值

1. 具体的方位名词
   • 水平方向：left、center、right
   • 垂直方向：top、center、bottom
   • 默认是left和top
2. 具体的像素
   • 5px 1.1em啥的，随便写
   • 一定要写单位，不写无效，毛效果都没有
   • 可以写负值，可以让图片移出去

注释

通过具体方位控制的时候，以左上角为原点，x越往右越大，y越往下越大

背景关联和缩写

格式

background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

注意点

1，background属性中的任何属性都可以省略，只要一个就行

关联方式

默认情况下，背景图片会随着滚动条的滚动而滚动，若不想滚动，就可以修改背景图片和滚动条的关联方式，这里使用background-attachment属性

赋值

• scroll 默认，随着滚动条滚动而滚动
• fixed 反之

背景图片和插入图片区别

补充

要想快速生成box1到4，如下操作

div.box$*4

他俩的区别

1. 背景图片仅仅是一个装饰，不占用位置。插入图片会占用位置
2. 背景图片有定位属性，可以轻易控制图片位置；插入图片则没有，所以控制其位置就很麻烦
3. 插入图片的语义比背景图片语义强，企开中，若你的图片想被搜索引擎收录，就是用插入图片

CSS精灵图

他说一种图像的合成技术

作用

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

怎样使用

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