精灵图与遮罩层的使用方法

一、精灵图

        精灵图的使用步骤：

• 第一步：先测量精灵图局部的大小，设置为盒子的宽度和高度
• 第二部：测量精灵图局部的坐标值，设置为背景定位的负值             

宽 width: 20px;

高 height: 20px;

精灵图局部定位值  -84px -366px

  

 

二、遮罩层

1.z-index

定义：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
简单来说就是谁的z-index属性值高在z轴方向会在更外面。

2.opacity
作用：规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。

3.display
这里我们只需要理解这个属性的两个值：
none :此元素不会被显示。
block :此元素将显示为块级元素，此元素前后会带有换行符。(简单理解就是显示)

4.position
定位，需要这个属性是因为，有了这个属性才可以控制遮罩层放哪（一般在中心位置）。
 

例子：

 

 总的来说，遮罩其实是在原来界面上加上一个半透明的蒙板，然后在外面再加一个你想要实现的效果。实现遮罩层，使一部分区域不可点击编辑等。