CSS絕對定位實現窗口遮罩功能:

這是HTML代碼部分

實例

html>

絕對定位之遮罩

用戶登錄窗口

用戶名：

密碼：

登錄

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

這里是CSS絕對定位－遮罩：css部分

實例

body?{

margin:?0;

background-image:?url(../images/php.jpg);

background-repeat:?no-repeat;

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:?-190px;

}

.login?form?{

width:?300px;

height:?380px;

}

.login?form?h3?{

color:?blue;

text-align:?center;

}

.login?form?label?{

color:?green;

}

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

總結

以上是生活随笔為你收集整理的php如何使用遮罩,CSS绝对定位实现窗口遮罩功能:2019年1月15日作业的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。