C11、CSS背景和精灵图

C11、CSS背景和精灵图

一、设置背景

1. 设置标签的背景颜色：通过background-color设置背景颜色

2. 设置背景图片：通过background-image设置背景url()指定，可以是本地，也可以是网络图片

   • 如果图片大小没有标签打，那么会自动填充

   • 多次请求获取图片

   • background-repeat: //平铺

   • repeat 可以加快渲染速度，节约网络资源

二、背景图片定位

1. 背景定位：

   • 同一个标签可以同时设置背景颜色和图片

   • background-position：0 0 ；可以是具体方位、可以是像素

2. 背景图片处理

   • 利用background-position：center top来让图片显示

3. 背景关联方式：

   • 背景图和滚动条关联方式： background-attrachment:fix

三、背景图片与插入图片区别

1. 快捷键 div.box$*6 生成div class = box 1-6

2. 背景上插入图片或者其他元素，图片不会成为背景

3. 背景图片有定位属性，插入图片没有定位属性

4. 插入图片语义比背景图片要强，如果想被搜索引擎收录

四、多张图片组成

1. div的嵌套

2. 多张图片拼接靠背景图片

五、CSS精灵图

1. 很多图标拼在一起，多个图片拼在一起，减少请求数量，降低服务器压力

2. 思路，通过定位，结合大小来设置精灵图。

3. 用fireworks软件切片工具可以快速得到位置和宽高