一、CSS 精灵
概述:
CSS精灵英文叫法 CSS sprites
,通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”,其实就是把网页中一些背景图片整合到一张图片文件中,再利用 CSS “background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position 精确的定位出背景图片的位置。
1、 精灵图的原理
1. 实现步骤
-
通常要限定容器大小
-
图片拼合
-
背景定位
2. 优缺点
优点
-
减少网页的 http 请求,从而大大的提高页面的性能
-
图片命名上的困扰
-
更换风格方便
缺点
-
必须要限定容器大小符合背景图元素位置
-
需要计算位置。
3. 应用场景
适用于一般小图片(如小图标,小背景),不适合大背景大布局背景。
二、滑动门
概述:
为了使特殊形状的背景使能够自由拉伸滑动,以适应元素内部的文本内容,出现了CSS滑动门技术。 最常见于各种导航栏的滑动门
实现要点
-
特殊背景拼合
-
内容自适应
-
浮动
-
行内块
-
三、CSS显示隐藏
display:
-
none;隐藏该元素并且该元素所占的空间也不存在了。
-
block; 显示元素
visibility:
-
hidden;隐藏该元素但是该元素所占的内存空间还存在,即“隐身效果”。
-
visible; 显示元素