在網頁設計中，經常需要添加一層蒙層來強調頁面元素或者作為背景。如果你想要給頁面添加一個中間透明的四周蒙層，該怎么做呢？這時候就可以用到CSS的偽元素。

/* 設置body的背景圖片 */
body {
background-image: url(bg.jpg);
background-size: cover;
}
/* 添加中間透明的四周蒙層 */
body::before {
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);  /* 透明度為0.5的黑色 */
z-index: -1;  /* 將偽元素置于最底部 */
}
/* 留出中間的空白部分 */
.container {
position: relative;
width: 80%;  /* 調整container的寬度與高度 */
height: 80%;
margin: auto;
z-index: 1;  /* 將container置于偽元素上方 */
}

上述代碼中，我們首先為body設置了一個背景圖片，并用cover屬性使其始終鋪滿整個頁面。接著通過偽元素before添加了一個寬高均為100%的黑色半透明背景，由于z-index設置為負值，所以偽元素處于頁面的最底層。而.container則是頁面核心元素，我們將其z-index設置為1，使其覆蓋在偽元素之上，在.container中添加的內容即為頁面的實際內容。

通過上述簡單的CSS代碼，你可以實現一個中間透明的四周蒙層，不僅可以強調頁面元素，還能起到美化頁面的作用。在實際開發過程中，可以根據需要調整相關屬性，達到更完美的效果。