一個網站想讓用戶登錄時，在原本頁面之上彈出一個登陸框是很常見的，一般來說，為了突出登陸框，會讓其他區域的背景變暗，這背后就是一行CSS代碼。

.login-dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
background: #fff;
padding: 20px;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
}
.mask {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5);
z-index: 998;
}

在下面這段代碼中，login-dialog代表登陸框，其中的position、top、left、transform、z-index等屬性都是用來讓登陸框居中展示，更多關于這些相關的知識可以在其他的教程中學習到，不過我們今天的重點不是它。

上面那段代碼的關鍵是下面的那部分——mask，它代表背景遮罩。通過其position屬性設置為fixed，top、right、bottom、left設置全部為0，遮罩就按照整個頁面顯示了。然后將背景顏色設置為半透明的黑色，就實現了讓登陸框彈出時背景暗的功能，z-index則是用來控制遮罩層的堆疊順序，使其總是在登陸框之下，保證登陸框完全覆蓋遮罩層。

至此，我們就實現了登陸框彈出時背景暗的效果。后面再根據自己的需求，為彈窗里的各個元素加上樣式就行了。