绝对定位实现窗口遮罩,可方便制作后台登陆窗口等。
实例
<!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; }
运行实例 »
点击 "运行实例" 按钮查看在线实例