html css蒙,CSS遮罩

HTML部分

登录网易云课堂

CSS部分

/* 登录弹窗 */

#login{

height: 100%;

width: 100%;

}

#login .mask{

height: 100%;

width: 100%;

position: fixed;

top: 0;z-index: 1000;

}

#login .mask{

background-color: #000;

opacity: 0.5;

}

#login .content{

width: 387px;

height: 298px;

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

z-index: 1001;

background-color: #fff;

box-sizing: border-box;

padding: 30px 53px 18px 38px;

}

#login .content .shutdown{

position: absolute;

top: 10px;

right: 9px;

}

#login .content p{

font: 18px/28px 微软雅黑;

color: #444444;

font-weight: 600;

}

#login .content .shutdown{

display: inline-block;

background: #fff url(../images/icon.jpg) no-repeat -16px 0;

width: 10px;

height: 12px;

padding-right: 6px;

overflow: hidden;

vertical-align: text-bottom;

cursor: pointer;

}

#login .content .id{

margin-top: 20px;

}

#login .content input{

width: 295px;

height: 45px;

margin-bottom: 15px;

border: 1px solid #dfdfdf;

padding-top: 5px;

padding-left: 10px;

font: 18px/28px 微软雅黑;

color: #ccc;

background: #fafafa;

}

#login .content .btn{

margin-top: 13px;

margin-bottom: 10px;

background: #2db352;

font-size: 16px;

color: #fff;

}

效果预览

弹窗.jpg