博客列表 >绝对定位实现窗口遮罩功能(时间:2019年1月17日)

绝对定位实现窗口遮罩功能(时间:2019年1月17日)

过儿的博客
过儿的博客原创
2019年01月18日 10:50:43649浏览

<!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="/css/demo-1503.css">

    <title>绝对定位实现遮罩</title>

</head>

<body>

    <div class="shade"></div>

    <div class="login"><img src="static/images/1.jpg"></div>

</body>

</html>



以下是样式文件:

body{

    margin:0;

    background-image: url(/static/images/3.png);

    background-size: cover;

}


.shade{

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height:100%;

    background-color: black;

    opacity: 0.7;

}

.login{

    background-color: white;

    position: absolute;

    left: 50%;

    top:50%;

    margin-left: -150px;

    margin-top:-50px;

}

.login img{

    width: 300px;

}

QQ图片20190117120816.png


重点:1、对于遮罩层,应该单独设置背景;

          2、底层利用opacity设置显示明亮度;

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