背景

背景

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">&#xe601;</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 方式制作精灵图