Css精灵

概述：

CSS精灵英文叫法 css sprites，通常被解释为〞CSS图像拼合”或“CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件

中，再利用 CSS "background-image",

"background- repeat,

确的定位出背景图片的位置。

"background-position^的组合进行背景定位，background-position 精确定位出背景图片的位置

2.1 精灵图的原理

2.实现步骤

1. 通常要限定容器大小
2. 图片拼合
3. 背景定位

2.1.2 优缺点

优点

• 减少网页的 http 请求，从而大大的提高页面的性能
• 图片命名上的困扰
• 更换风格方便

缺点

• 必须要限定容器大小符合背景图元素位置
• 需要计算位置。

2.1.3 应用场景

适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。

CSS显示隐藏

display:

• none： 隐藏该元素并且该元素所占的空问也不存在了。
• block; 显示元素

visibility:

• hidden 隐藏该元素但是该元素所占的内存空间还存在，即'隐身效果。
• visible 显示元素

opacity

•语法

opacity:0.5:

•【取值：0-1】

0表示全透明，1表示全不透明，0-1之间表示半透明

•使用说明：

设置opacity元素的所有后代元素会随着一起具有透明性，【一般用于调整图片或者模块的整体不透明度】

•兼容性：IE6、不、8【不支持】，1IE9及以上版本和标准浏览器都支持