本文目錄導(dǎo)讀：

1. 使用偽元素創(chuàng)建蒙版
2. 使用JavaScript動(dòng)態(tài)創(chuàng)建蒙版

CSS怎么給頁面蒙版

在CSS中，我們可以使用蒙版（mask）來遮擋頁面中的部分內(nèi)容，以達(dá)到一些特殊的效果，下面是一些關(guān)于如何使用CSS給頁面蒙版的方法。

一、使用CSS的mask屬性

CSS的mask屬性可以用來創(chuàng)建一個(gè)蒙版，該蒙版可以遮擋頁面中的部分內(nèi)容，我們可以使用mask屬性來創(chuàng)建一個(gè)圓形蒙版，該蒙版可以遮擋頁面中的非圓形區(qū)域：

.mask-container {
  width: 200px;
  height: 200px;
  mask: url(#circle-mask);
}

在上面的代碼中，#circle-mask是一個(gè)指向圓形蒙版圖像的URL，當(dāng)瀏覽器渲染該元素時(shí)，它將會(huì)應(yīng)用該蒙版，從而遮擋頁面中的非圓形區(qū)域。

使用偽元素創(chuàng)建蒙版

除了使用mask屬性外，我們還可以使用偽元素來創(chuàng)建蒙版，我們可以使用:before或:after偽元素來創(chuàng)建一個(gè)全屏蒙版，該蒙版可以遮擋整個(gè)頁面：

.mask-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

在上面的代碼中，我們創(chuàng)建了一個(gè)全屏的偽元素蒙版，并將其背景色設(shè)置為半透明的黑色，這樣，當(dāng)瀏覽器渲染該元素時(shí)，它將會(huì)應(yīng)用該蒙版，從而遮擋整個(gè)頁面。

使用JavaScript動(dòng)態(tài)創(chuàng)建蒙版

除了使用CSS外，我們還可以使用JavaScript來動(dòng)態(tài)創(chuàng)建蒙版，我們可以使用JavaScript來監(jiān)聽用戶的點(diǎn)擊事件，并在用戶點(diǎn)擊時(shí)創(chuàng)建一個(gè)新的蒙版：

document.querySelector('.mask-container').addEventListener('click', function() {
  var mask = document.createElement('div');
  mask.style.position = 'absolute';
  mask.style.top = '0';
  mask.style.left = '0';
  mask.style.right = '0';
  mask.style.bottom = '0';
  mask.style.background = 'rgba(0, 0, 0, 0.5)';
  this.appendChild(mask);
});

在上面的代碼中，我們使用JavaScript創(chuàng)建了一個(gè)名為mask的新的div元素，并將其樣式設(shè)置為全屏的半透明黑色背景，我們將該元素添加到.mask-container元素的子元素列表中，從而創(chuàng)建一個(gè)新的蒙版。

CSS提供了多種方法來給頁面蒙版，包括使用mask屬性、偽元素和JavaScript等，我們可以根據(jù)自己的需求和喜好來選擇***適合的方法。