博客列表 >绝对定位之窗口遮罩-2019年1月15日23点39分

绝对定位之窗口遮罩-2019年1月15日23点39分

kszyd的博客
kszyd的博客原创
2019年01月18日 11:06:45546浏览

绝对定位实现窗口遮罩,可方便制作后台登陆窗口等。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="static/css/style04.css">
    <title>绝对定位之窗口遮罩</title>
</head>
<body>
    <div class="zhezhao"></div>
    <div class="login"><img src="static/images/img.jpg" alt=""></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

body {
    margin: 0;
    background-image: url(../images/img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.zhezhao {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.7;
}

.login {
    background-color: antiquewhite;
    position: absolute;
    left: 50%;
    top: 50%;
}
.login img {
    width: 300px;
    height: 500px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

 

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议