html+css源碼之實現登入彈出框遮罩層效果__html

來源:互聯網
上載者:User
在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偽類別選取器

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.