### 1、CSS 精灵
**概述:**
CSS精灵英文叫法 `CSS sprites`,通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”,其实就是把网页中一些背景图片整合到一张图片文件中,再利用 CSS “background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position 精确的定位出背景图片的位置。
#### 2.1 精灵图的原理
##### 2.1.1 实现步骤
1. 通常要限定容器大小
2. 图片拼合
3. 背景定位
##### 2.1.2 优缺点
**优点**
- 减少网页的 http 请求,从而大大的提高页面的性能
- 图片命名上的困扰
- 更换风格方便
**缺点**
- 必须要限定容器大小符合背景图元素位置
- 需要计算位置。
##### 2.1.3 应用场景
适用于一般小图片(如小图标,小背景),不适合大背景大布局背景。
## 滑动门
### 概述:
为了使特殊形状的背景使能够自由拉伸滑动,以适应元素内部的文本内容,出现了CSS滑动门技术。 最常见于各种导航栏的滑动门
### 实例预览
https://weixin.qq.com/
![day06_01](day06_01.png)
### 形象图示
![day06_02](day06_02.png)
### 实现要点
- 特殊背景拼合
- 内容自适应
- 浮动
- 行内块
## CSS显示隐藏
### display:
- none:隐藏该元素并且该元素所占的空间也不存在了。
- block; 显示元素
### visibility:
- hidden 隐藏该元素但是该元素所占的内存空间还存在,即“隐身效果”。
- visible 显示元素
### opacity
- 语法:
opacity:0.5:
- 【取值:0-1】
0表示全透明,1表示全不透明,0-1之间表示半透明
- 使用说明:
设置opacity元素的所有后代元素会随着一起具有透明性,
【一般用于调整图片或者模块的整体不透明度】
- 兼容性:IE6、7、8【不支持】,IE9及以上版本和标准浏览器都支持