给div添加遮罩层及处理多张图片空隙问题

一、遮罩层

这里说的遮罩层是给指定的div添加带有提示或者无提示一个蒙层，如图片，视屏的解释语等。

要达到遮罩层效果，需要注意的点就是遮罩层这个div的父级需要相对定位，然后自己需要绝对定位

.warp{
    position:relative;
    margin:200px auto;
    width:600px;
    height:600px;
}
.filter{
    position:absolute;
    width:600px;
    height:600px;
    margin:0;
    padding: 0;
    background-color:black;
    left:0;
    top:0;
    opacity: 0.5;
    text-align: center;
    display: none;
}


<div class="warp">
    <img src="images/04.jpg" alt="一张图片" width="100%" height="300px">
    <img src="images/03.jpg" alt="一张图片" width="100%" height="300px">
    <a href="#">
        <div id="filter" class="filter">
            <p>两种境界，一种人生！</p>
        </div>
    </a>
</div>

事件触发也有两种方式：

1，通过a标签的hover属性，首先将遮罩层的opacity设为0；然后鼠标移入

2，通过js函数触发hover，这时就要设置遮罩层opacity为最终想要的效果，并且设置display为none,然后通过js函数触发

最终效果展示：

二、多张图片空隙问题

---

解决办法：

1，使用letter-spacing（字间距）：使用负像素【（-50px）具体看情况调试】使间隙消失；

2，在img的父级设置font-size:0;

3,设置img display属性为block,横向排列使用float：lef；

4，横向排列的图片可以将img写在同一行：<img src=" "><img src=" "><img src=" ">

消除间隙图：