C11、CSS背景和精灵图

一、设置背景

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

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

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

多次请求获取图片

background-repeat: //平铺

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

二、背景图片定位

背景定位：

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

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

背景图片处理

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

背景关联方式：

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

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

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

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

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

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

四、多张图片组成

div的嵌套

多张图片拼接靠背景图片

五、CSS精灵图

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

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

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