CSS3 Filter blur实现背景模糊弹窗教程

在观看视频退出时，注意到一种背景模糊的弹窗设计，相比纯色半透明背景更具视觉层次感。经过尝试确认，该效果由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制作弹窗效果的详细介绍，希望能帮助读者。如有疑问请留言，小编将及时回复。感谢对本站的支持！

利用CSS3 Filter实现背景高斯模糊的弹窗效果

弹窗结构定位方法

CSS3高斯模糊实现

遮罩层点击穿透解决方案

实用工具推荐