html css（部分）

 精灵技术    英文名 css sprites （精灵图、雪碧技术）

原理：将页面中的背景图都拼合到一张图中。

利用背景属性，使不同的元素显示不同的图片部分

步骤：

1.将背景图拼合到一张图中

2..创建一个块级元素确定宽高，这个宽高就是想要的精灵图的大小（是背景图）

3.引入背景图片

4.不平铺

5.设置位置的起始位置 背景定位position第一个值是水平，第二个值是垂直。取值是反方向坐标轴（值为多少就取负的多少的值） 

优点

1.减少网页http请求提高页面性能。

2.减少图片命名上的困扰。

3.更换风格方便。

缺点

1.必须要限定容器的大小

2.需要计算位置。

使用场景

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

显示隐藏

display：none； 不站位，元素直接消失

visibility：hidden；站位元素消失

visibility：visible；无默认样式 ，元素显示

opacity 给父元素设置子元素会继承

使元素透明化 取值 数值0是全透明

1是正常色 0到1之间是透明的轻重 不加px

滚动门

嵌套关系 给父级设背景图片，不平铺，起始位置left

子集设背景图 ，不平铺，起始位置right

最大的父级设宽，父和子设高不设宽。