利用HTML、CSS实现的图片预览弹出层的教程

2020-05-05 07:17:41易采站长站整理

#ImageScaBg{     
    position:fixed;     
    background-color:#000;     
    top:0px;     
    left:0px;     
    opacity:0.6;     
    width:100%;     
    height:100%;     
    display:none;     
}     
#ImageSca{     
    position:absolute;     
    background-color:#333;     
    border:1px solid #ccc;     
     -webkit-border-radius:5px;       
    -moz-border-radius:5px;      
    border-radius:5px;       
    display:none;     
}     
#ImageContainer{     
    float:left;     
    text-align:center;     
}     
    
#ImageInfo{     
    float:left;     
    width:300px;     
    background-color:#fff;     
     -webkit-border-radius:0 3px 3px 0;       
    -moz-border-radius:0 3px 3px 0;       
    border-radius:0 3px 3px 0;       
}     
#imgName{     
    font: 15px "微软雅黑", Arial, Helvetica, sans-serif;     
    padding-left:10px;     
    font-weight:500px;     
}     
#imgInfo{     
    font: 13px "微软雅黑", Arial, Helvetica, sans-serif;     
    padding-left:10px;     
    color:#808080;     
}     
#imgLunbo{     
    height:80px;     
    position:absolute;     
    margin-left:50px;