html+css原始碼之實現登入彈出框遮罩層效果
阿新 • • 發佈：2019-01-28
在web開發中，很多網站都做了一些特別炫麗的效果，比如使用者登入彈框遮罩層效果，本文章向大家介紹css如何實現登入彈出框遮罩層效果，需要的朋友可以參考一下本文章的原始碼。
html+css實現登入彈出框遮罩層效果,原始碼如下：
主要使用到css的position相對定位和絕對定位以及z-index屬性。
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偽類選擇器