1、背景：背景色、背景图
2、背景色
(1) 、英文单词
(2) 、十六进制 #ff0000;
(3) 、 RGB 红绿蓝
(4) 、rgba 红绿蓝透明度 rgba(255, 0, 0, 0.5);
① 取值范围0-1
② 1是完全不透明 ，0是完全透明
(5) 、补充透明度 opacity: 0.5
二者的区别： rgba 不会实现继承 而opacity 会使父元素和子元素的透明度都会发生改变
背景图
background-img:url(地址)
css精灵图与字体图标
一、精灵图
1、通过淘宝网首页查看精灵图的请求过程
2、为什么要用精灵图？
(1) 在网页中引入图片，src的属性值是一个网址，会请求数据，需要时间
3、如何去减轻服务器压力，减少加载图片的时间
① 图片的懒加载
② 精灵图
4、CSS精灵图定义：
① CSS sprites
② 多个小图标放在一张图片上，然后通过背景方位去展示不同的小图标
5、使用
① background-image: url(images/img_navsprites.gif);
② background-position: -46px 0;
6、优点
① 有效地减少服务器接受和发送请求的次数
② 提高页面的加载速度
二、字体图标
1、为什么要用字体图标
① 图片过大，会增加服务器的压力
② 通过样式设置图片会失真
2、定义：是一种字体inconfont可以设置大小颜色
3、下载过程
① 打开http://www.iconfont.cn/登录
② 搜索想要使用的字体图标添加入库
③ 在库中创建项目
④ 可以编辑字体图标的大小、形状、颜色
⑤ 下载至本地
4、使用方法
① Unicode
1) 引入iconfont.css
2) 查找对应的字体编码
3) 使用： <span class="iconfont"></span>
② Font class
1) 引入iconfont.css
2) 查找对应的字体类名
3) 使用<div class="iconfont icon-fangzi"></div>
① Symbol
1) 引入iconfont.js
2) 引入入特定样式
3) 查找对应的字体类名
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-suosou"></use>
</svg>
5、优点
① 可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
② 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
③ 本身体积更小，但携带的信息并没有削减。
④ 几乎支持所有的浏览器
⑤ 移动端设备必备良药...
扩充 ：为了节省空间 可以将图片用ps 方式制作精灵图