CSS蒙版技巧-优快云博客

今天给大家介绍的是蒙版技巧，利用div设置半透明色来遮盖底部的图层或div，当鼠标移入的时候，半透明色的div就开始遮盖图层，已达到蒙版的效果。

css部分：

.box1{
    width: 1024px;
    height: 768px;
    /*border: 1px solid #000;*/
    position: relative;
    /*超出部分隐藏*/
    overflow: hidden;
    margin: auto;
}

.mb_top{
    width: 824px;
    height: 200px;
    /*半透明色*/
    background-color: rgba(255,0,0,.5);
    position: absolute;
    top: -200px;
    transition: all linear 1s;
    text-align: center;
}
.box1:hover .mb_top{
    top: 0;
}
.mb_bottom{
    width: 824px;
    height: 200px;
    /*半透明色*/
    background-color: rgba(255,0,0,.5);
    position: absolute;
    bottom: -200px;
    left: 200px;
    transition: all linear 1s;
    text-align: center;
}
.box1:hover .mb_bottom{
    bottom:0;
}
.mb_left {
    width: 200px;
    height: 568px;
    /*半透明色*/
    background-color: rgba(255,0,0,.5);
    position: absolute;
    left: -200px;
    top: 200px;
    transition: all linear 1s;
    text-align: center;
}
.box1:hover .mb_left{
    left: 0;
}
.mb_right {
    width: 200px;
    height: 568px;
    /*半透明色*/
    background-color: rgba(255,0,0,.5);
    position: absolute;
    right: -200px;
    top: 0;
    /*动画效果*/
    transition: all linear 1s;
    text-align: center;
}
.box1:hover .mb_right{
    right: 0;
}


html部分：

<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>蒙版 || 遮罩</title>
</head>
<body>

<div class="box1">
    <img src="test_1.jpg" alt="pic"/>
    <div class="mb_bottom">这是三只大企鹅</div>
    <div class="mb_left">这是三只大企鹅</div>
    <div class="mb_right">这是三只大企鹅</div>
    <div class="mb_top">这是三只大企鹅</div>
</div>
</body>
</html>

效果如下：

原图层：