给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>