html+css源码之实现登录弹出框遮罩层效果

来源：互联网发布：mac os x 安装软件编辑：程序博客网时间：2024/06/06 20:03

在web开发中，很多网站都做了一些特别炫丽的效果，比如用户登录弹框遮罩层效果，本文章向大家介绍css如何实现登录弹出框遮罩层效果，需要的朋友可以参考一下本文章的源代码。
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伪类选择器

0 0