蒙版图片和背景图法

 <!--img-->
 <div class="fa1">
    <div class="fat2"> <img src="../img/index1.jpg" alt=""/></div>
     <div class="meb"></div>
 </div>
 <!--background-img-->
   <div class="div1">
   <div class="div2">fs</div>
   </div>
<br/>

/*图片法*/
.meb{
    width: 360px;
    height: 480px;
    outline: 1px solid grey;
    background: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    left: 0;

}
.fa1{
    position: relative;
    cursor: pointer;

}


.meb{
    transition: all 2s linear;
}
.meb:hover{
    width: 360px ;
    height: 0;
}

.fat2 img{
    transition: all 2s linear;
}
.fat2:hover img{
    -webkit-transform: scale(2);
}

.meb img{
    transition: all 2s linear;
}
.meb:hover img{
    -webkit-transform: scale(2);
}

/*背景图法*/
.div1{
    background-image:url("../img/index1.jpg");
    width: 360px;
    height: 480px;
    outline: 1px solid pink;
}
.div2{
    width: 360px;
    height: 480px;
    background: rgba(0,0,0,.5);
}
.div2:hover{

    background-size: 600px 600px;
}

转载于:https://www.cnblogs.com/ldcxj/p/5304362.html