CSS絕對(duì)定位實(shí)現(xiàn)窗口遮罩功能:

這是HTML代碼部分

實(shí)例

html>

絕對(duì)定位之遮罩

用戶登錄窗口

用戶名：

密碼：

登錄

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

這里是CSS絕對(duì)定位－遮罩：css部分

實(shí)例

body?{

margin:?0;

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

background-repeat:?no-repeat;

background-size:?cover;

}

.shade?{

/*?遮罩絕對(duì)定位，并自動(dòng)伸展到整個(gè)窗口?*/

position:?absolute;

left:?0;

top:?0;

width:?100%;

height:?100%;

background-color:?black;

opacity:?0.7;

}

.login?{

background-color:?white;

/*?登錄窗口不隨窗口大小變化，說(shuō)明它不是文檔流中，是絕對(duì)定位?*/

position:?absolute;

/*?使登錄窗口頁(yè)面在正中間位置開(kāi)始顯示，注意是顯示的起點(diǎn)在正中間?*/

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;

}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。