局部模糊遮罩效果是一種獨(dú)特又美觀的CSS效果，可以讓你將頁(yè)面中的某個(gè)區(qū)域模糊掉，讓人眼前一亮。下面讓我們看看如何實(shí)現(xiàn)此效果。

.blur {
position: relative;
}
.blur:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
filter: blur(5px);
opacity: 0.8;
}

首先我們需要在要添加模糊遮罩的元素上添加一個(gè)相對(duì)定位的樣式類，同時(shí)在其偽元素after上設(shè)置絕對(duì)定位，使其充滿整個(gè)元素包含塊。

然后，我們將模糊效果應(yīng)用于偽元素的背景，這樣就可以給整個(gè)元素添加一個(gè)模糊的遮罩效果，同時(shí)使用opacity屬性可以控制透明度，使元素顯示更加自然。

最后，我們就可以在HTML中使用這個(gè)樣式類來(lái)實(shí)現(xiàn)自己想要的模糊遮罩效果啦！