CSS濾鏡遮罩是一項非常有用的CSS技術，它可以為元素添加濾鏡效果和遮罩圖案。CSS濾鏡是一種可以應用于元素的圖形效果，可以改變元素的顏色、亮度、對比度等屬性，類似于Photoshop中的圖層合并濾鏡。而CSS遮罩則可以將元素的某些部分隱藏或者添加圖案。

.mask{
position: relative;
width: 300px;
height: 200px;
background: url(./img/bg.jpg) no-repeat center center / cover;
}
.mask::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.3;
filter: blur(5px);
}

以上是一個使用CSS濾鏡和遮罩的例子。其中，mask類的元素是一個300px * 200px的容器，背景采用通過CSS設置的自適應背景圖。容器的偽元素before采用CSS設置的黑色背景并設置半透明度為0.3，同時添加了一個5px的模糊濾鏡效果。通過這種方式，容器的背景圖被部分遮罩，同時添加了模糊效果，達到了更好的視覺效果。

值得注意的是，不同的濾鏡效果和遮罩圖案會對性能產生不同程度的影響，因此應該根據具體需求選擇合適的效果。此外，對于一些老版本的瀏覽器可能不支持一些高級的特性，因此需要進行兼容性處理。