在Web頁面設(shè)計中，背景圖常常是為了讓頁面更加美觀和吸引人而使用的。但是有時候，我們希望背景圖能夠更加突出，并且能夠在圖片上方添加一層遮罩。 好在CSS提供了一個非常簡單的方法來實現(xiàn)這個效果。我們可以通過偽元素選擇器來為背景圖蓋上一層遮罩。代碼如下： ``` /*添加一個遮罩層*/ .wrapper::before { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); /*這里定義了一層半透明的黑色遮罩*/ } /*設(shè)置背景圖*/ .wrapper { background-image:url('background.jpg'); background-size:cover; /*保持圖片的寬高比例來占滿整個背景*/ position:relative; } ``` 以上代碼中，我們首先為`.wrapper`這個元素定義了一個背景圖，然后通過`background-size`屬性讓背景圖自適應容器大小。這里我們同時將該元素設(shè)置為`relative`相對定位，這一步操作可以方便后面的遮罩層絕對定位。 接著，我們通過`:before`偽元素選擇器為`.wrapper`添加了一層遮罩。`:before`偽元素選擇器可以為元素的內(nèi)容區(qū)域之前插入一些內(nèi)容，并且可以使用`content`屬性來定義插入的內(nèi)容。在這個例子中，我們插入一段空內(nèi)容（`""`），并使用`block`屬性和`position:absolute`將其強制變成一個塊級元素，然后設(shè)置其大小和位置為100%。最后，我們設(shè)置了`background-color`屬性為半透明的黑色，達到了添加遮罩的效果。 在實際開發(fā)中，我們可以通過這種方式為背景圖添加遮罩來實現(xiàn)多種不同的效果，比如透明度漸變、不同顏色的遮罩、或者使用CSS3的動畫為遮罩加上各種效果等等。