遮罩层的意义是啥？

.main .topLayer{

    position: absolute;

    top: 100px;

    left: 0;

    background-color:#000;

    width: 100%;

    height: 600px;

    opacity: 0.5;

}

.main .topLayer-top{

    width: 500px;

    height: 300px;

    position: absolute;

    top:400px;

    margin-top: -150px;

    z-index: 2;

    right:50% ;

    margin-right: -250px;

}

上面是老师写的代码，这个设置遮罩层有什么意义呢，为什么不直接在图片的中央设置一个div呢？