利用CSS3 Filter实现背景高斯模糊的弹窗效果
本文介绍如何使用CSS3的filter属性实现背景高斯模糊的弹窗效果。通过对比已知与未知尺寸弹窗的定位方法，重点讲解-webkit-filter:blur()的应用及兼容性限制，并提供解决遮罩层点击穿透问题的完整JS与CSS代码方案。
在观看视频退出时，注意到一种背景模糊的弹窗设计，相比纯色半透明背景更具视觉层次感。经过尝试确认，该效果由CSS实现，尽管浏览器兼容性存在差异，但仅需一个CSS属性即可完成，这引发了对前端技术细节的重新审视。
弹窗结构定位方法
弹窗通常由弹出层（popus）和遮罩层（mask）组成。习惯上将两者设为fixed定位，具体区别可通过实践验证。对于遮罩层，需设置属性使其覆盖整个屏幕。
.mask{position:fixed;top:0px;bottom:0px;left:0px;right:0px;background-color:#000;opacity:0.6;filter:alpha(opacity=60)}弹出层（popus）的实现相对复杂，主要有两种方法。
第一种适用于已知尺寸的弹窗，通过top、left配合负margin值来实现居中定位。
.popus{width:300px;height:200px;position:fixed;left:50%;top:50%;margin-left:-150px;margin-top:-100px;background-color:#000}第二种针对未知尺寸的弹窗，需通过JS获取弹窗的width和height，再进行类似上述的定位设置，此处不再赘述。
第三种方法在支持CSS3的环境中，无需知晓弹窗宽高即可实现，具体设置如下。
.popus{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}主要利用translate属性进行定位，偏移百分比基于元素自身的宽高，原理与第一种方法类似，但使用更为便捷。
CSS3高斯模糊实现
回到核心主题，即如何实现类似Photoshop中高斯模糊的背景效果。
此处引入CSS属性filter，需注意这与IE旧版filter不同。filter包含多个值，具体可参考相关详细文档。本文仅讨论其中的blur功能，先看效果预览。
目前该属性主要支持WebKit内核浏览器，因此代码中直接使用了css3属性，且需在WebKit浏览器中查看效果。
效果显著，核心代码仅一行：-webkit-filter:blur(8px)，数值代表模糊程度。在实际项目中，可结合动画增强页面生动性，完整代码如下：
<div class='bg'>
<img src='bg.jpg' />
</div>
<div class='popus'>
效果是不是要好过纯色加透明呢
<div>
<div class='left btn '>确实不错</div>
<div class='right btn'>也就那样</div>
</div>
</div>
CSS代码：
*{padding:0px;margin:0px}
img{width:100%;margin:0px auto;display:block}
.bg.blur{-webkit-filter:blur(8px)}
.popus{width:400px;color:#000;;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);font-family:"微软雅黑";padding:20px 0px;font-weight:bold;background-color:rgba(255,255,255,0.6);border-radius:18px;text-align:center;padding:30px 0px;box-shadow:0px 0px 10px rgba(0,0,0,0.4);display:none}
.popus div{width:220px;margin:10px auto}
.popus div.btn{width:80px;padding:5px 10px;color:#000}
.left{float:left;border:1px solid #000}
.popus div.btn.right{float:right;color:#666}JS代码：
$('.bg').on('click',function(){
console.log(98)
$(this).addClass('blur');
$('.popus').show();
})
$('.btn').on('click',function(){
$('.bg').removeClass('blur');
$('.popus').hide();
})这是否意味着功能完整？查看控制台发现仍有问题。
遮罩层点击穿透解决方案
当弹窗出现时，需禁用底层元素的点击事件。虽然背景已模糊，但底层事件仍可触发。解决方法是添加一个无背景色的遮罩层覆盖页面，使点击事件作用于该遮罩层，从而阻止底层事件触发。
点击此处查看在线效果 http://runjs.cn/detail/nrlmmnbg
以上为JS结合CSS3制作弹窗效果的详细介绍，希望能帮助读者。如有疑问请留言，小编将及时回复。感谢对本站的支持！
JS表单序列化出现中文乱码怎么解决
2026-11-05 17:21:05
JS代码在线格式化工具推荐：无需安装快速美化
2026-11-05 17:17:49
WebStorm内置JS代码格式化功能怎么用
2026-11-05 10:10:47
在线JS代码格式化与混淆压缩工具推荐及使用指南
2026-11-03 20:31:53
CodePen、JSFiddle与RunJS对比：哪款在线JavaScript编辑器更好用
2026-11-03 18:52:45