css局部模糊遮罩效果

局部模糊遮罩效果是一种独特又美观的CSS效果，可以让你将页面中的某个区域模糊掉，让人眼前一亮。下面让我们看看如何实现此效果。

.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;
}
    

首先我们需要在要添加模糊遮罩的元素上添加一个相对定位的样式类，同时在其伪元素after上设置绝对定位，使其充满整个元素包含块。

然后，我们将模糊效果应用于伪元素的背景，这样就可以给整个元素添加一个模糊的遮罩效果，同时使用opacity属性可以控制透明度，使元素显示更加自然。

最后，我们就可以在HTML中使用这个样式类来实现自己想要的模糊遮罩效果啦！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！