html+css实现登录弹出框遮罩层效果,源代码如下:
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#lightbox {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
opacity: .6;
}
#main {
position: relative;
background-color: #fff;
z-index: 1;
}
</style>
</head>
<body>
<div id="main">Lorem ipsum, my opactiy is not affected</div>
<p>My opactiy is affected</p>
<div id="lightbox"></div>
</body>
</html>
在线运行
主要使用到 css的 position相对定位和绝对定位以及 z-index属性。
原文地址:http://www.manongjc.com/article/1280.html
css :enabled与:disabled伪类选择器使用方法和实例 css 伪类选择器:checked实例讲解 css :before选择器使用方法及实例介绍 css 如何将背景图片固定在某一个地方 css :empty伪类选择器