CSS: filter: blur(); 实现高斯模糊效果，不可不知的细节优化

原文链接

前言

在项目中，要实现如下的效果：

页面顶部的设计稿，前面一个卡片式的轮播，后边的背景（是椭圆的一部分）取前面的图片，进行一个高斯模糊的处理。

开始

前面的轮播部分，使用了第三方的轮播插件，非常好用，推荐给大家（地址）。轮播，不作为今天的主要内容，暂时简单描述下，有机会再详细讲解。有兴趣的同学可以自己试一试，根据插件提供的功能，进行一些样式调整即可。

现在开始分析后面背景的实现方式，最开始考虑的是使用一个div,给div设置背景图片，设置div的width、height以及border-radius属性，达到椭圆的效果。

实践

1. 使用背景图片的实现方式

HTML:

<div class="head">
    <div class="bg"></div>
</div>

CSS:

.bg{
	/* 设置相对定位 */
	position: relative;
	/* 宽度120%，-10%让元素集中 */
	left: -10%;
	/* 为了实现椭圆效果 */
	width: 120%;
	height: 132px;
	/* 只设置左下角和右下角的圆角 */
	border-radius: 0 0 80% 80%;
	/* 设置高斯模糊 */
	filter: blur(20px);
	/* 背景图片 */
	background: url('/static/demo.jpg') center; 
	background-size: cover;
}

效果图：

可以看到filter: blur(20px);设置模糊效果后， 在椭圆区域的边缘，有一些扩展的白边。（可以试试矩形的div, 效果会更明显）

解决方式：给div的父元素添加overflow: hidden;

CSS:

.head{
	overflow: hidden;
	height: 132px;
}

效果图：

可以看到div底边的模糊效果已经没有了，限制了div的显示大小，但是没有实现想要的椭圆效果。两边的圆弧还是有很明显的扩展效果。

2. 综上，使用背景图片的方式无法实现想要的效果。在知乎上看到一个优秀的回答（原文），参考里面的实例，可以实现。

实现方案： 外层一个div设置为椭圆形状，控制内层img可显示的区域。图片和形状用两个元素分开控制。

HTML：

<div class="bg">
	<img src="/static/demo.jpg" class="test-img">
</div>

CSS:

/* 外层椭圆形状，内层图片只能在椭圆区域展示 */
.bg{
	position: relative;
	left: -10%;
	width: 120%;
	height: 130px;
	border-radius: 0 0 80% 80%;
	overflow: hidden;
}
/* 内层显示的图片 */
.bg img{
	width: 100%;
	height: 100%;
	filter: blur(20px);
	overflow: hidden;
}

效果图：

Bingo!  完美实现想要的效果啦！ O(∩_∩)O~~

总结

1. CSS使用filter: blur(20px);实现高斯模糊效果，周边会出现扩展的白边；

解决方案： 对父元素设置overflow: hidden; 隐藏即可。

2. 对于复杂的页面结构，可以考虑使用多个元素实现；不要局限于样式，从结构上分析问题。

 

嘘寒问暖 不如打笔巨款~