CSS3高斯模糊特效

---

参考网页：

https://www.cnblogs.com/oxspirt/p/6251238.html CSS实现遮罩层透明文字不透明

https://blog.csdn.net/csu_passer/article/details/78406702 CSS3实现模糊背景的三种效果

https://www.cnblogs.com/zhaofeis/p/5938554.html CSS inherit

---

关于个人学习心得：

查阅了挺多关于前端的资料，以前一直纠结该如何学习HTML和CSS，看W3S的教程感觉收益没多大，第一映像就是有特别特别多要记的标签，而且W3S上的实例也杯水车薪，有许多细节的地方没有讲得很透彻。我看了HTML和CSS的教程后就决定直接从实战抓起，直接通过特效来学习，这样不仅学了特效，还能从中学到许多基本而且我还缺失的东西。

---

实际效果：

废话不多说，先看效果图，环境是chrome：

实现思路很简单，分为三个div，第一个div设置背景图，第二个div设置文字背景框，第三个div文字层。

三者的关系是：背景图->文字背景框 && 文字层

这里我们要引入伪元素after来实现背景模糊，这里需要after继承父类背景，然后在这个条件下进行模糊的话就可以达到没有白边的效果。

---

分析代码：

html没什么好说的，只要按要求嵌套进去即可。

<!-- html code -->
<div class="bg">
    <div class="shape"></div>
    <div class="content">The background picture is bluring.
    <br>However, you can see that the text is not blur.<br>
    背景图片已被高斯模糊，然而你可以看到文字并没有被模糊。
    </div>
</div>

现在让我们一层一层剥开代码的心，一探究竟吧。首先是最外层bg背景层：

<!-- css code -->
<style type="text/css">
.bg{
	background: url(img.png) no-repeat center center;
	background-size: cover;
	height: 700px;
	text-align: center;
	position: relative;
	z-index: 5;
}
.bg:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left:0;
	top:0;
	background: inherit;
	filter: blur(15px);
	z-index: 3;
}
</style>

bg背景：导入背景并设置为不重复且居中对齐，cover保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。在这里设置文本对齐方式为center，当然你也可以放到文本层没有影响。position设置为相对定位，此处相对定位是相对前一个容器即body进行定位的（有错请纠正这里挺模棱两可的），通过z-index设置层叠为5，这里的z-index最大就说明它在最上面。

伪元素after：content属性一定要设置为空，否则会被判定为空对象，设置绝对定位，即相对于bg位置定位，设置背景继承bg，在对其进行模糊，设置层叠为3。这里也可以设置大于bg的z-index，没有影响。

---

<style type="text/css">
.content{
	color: whitesmoke;
	font-size: 20px;
	font-family: Lucida Grande, "微软雅黑",Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Verdana," sans-serif";
	position: absolute;
	top: 308px;
	left: 528px;
	z-index: 4;
}
</style>

文字层设置文字相关参数，位置，设置好层叠一定要保证在最上面，不要让图片挡住文本。

---

<style type="text/css">
.shape{
	width: 583px;
	height: 148px;
	background: #7C7C7C;
	position: absolute;
	top: 276px;
	left: 506px;
	z-index: 4;
	border-radius: 15px;
	opacity: 0.5;
}
</style>

文本框层的层叠和文字层相等，也可以小于文字层。设置透明度，位置，颜色……等参数。

---

这时候效果差不多就出来了。浏览器如果分辨率变了会导致排版变乱，这时候只要在div层的最外面嵌套一个div，设置magrin为auto，固定宽高，就可以了。

.main{
	width: 1510px;
	height: 700px;
	margin: auto;
}

总结：

根据电脑环境不同可能位置会有所偏差，请自行更改位置参数。这里面也有我不太理解的地方比如position参数，伪元素那为什么能够消去白边。如果有错误请各位网友即时纠正，谢谢啦。