css模糊背景-好的！ CSS使指定区域的背景图片高斯模糊

在网页设计中，我们常常只看到半透明效果的层次感，但半透明+虚化背景css模糊背景，这些超美的视觉效果并不多见。 原因之一是实现方法困难。 真的有那么难实现吗？ 不需要~现在只需要使用CSS就可以实现！

明天分享的Blur案例是使用纯CSS实现的。 您可以指定特定区域或元素的背景模糊。 这个效果确实比普通的半透明漂亮很多。 目前作者还编写了多种模糊效果来满足不同的需求。 你。

效果名称：模糊实验

在线演示：

代码由AlexMoore编译，实现了多种模板效果，可以在不同的场合使用。 我们来看一下下面的截图演示。 建议打开DEMO查看实际效果。

CSS高斯模板专用

模拟iOS的模糊效果

多重模糊效果

像窗户

关键模糊效果

侧边栏模糊效果

教程

首先看好自己需要的疗效css模糊背景，然后在源码中找到对应的代码，然后直接copy就可以了，代码如下：

.blur-container.blur-3 {
 --bg: url("background.jpg");
 background-image: var(--bg);
}
.blur-container.blur-3 .blur-box {
 color: #31405e;
 width: 100%;
 height: 100%;
 max-height: 300px;
 overflow: hidden;
}
.blur-container.blur-3 .blur-box h2 {
 font-size: 37px;
}
.blur-container.blur-3 .blur-box::before {
 z-index: 10;
 opacity: 0.5;
 background-color: #fff;
}
.blur-container.blur-3 .blur-box::after {
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
 -webkit-filter: blur(15px) brightness(110%);
 filter: blur(15px) brightness(110%);
 background-image: var(--bg);
}

设计师们，以后做网页设计再也不用害怕“高斯模糊”设计了。 如果后端开发者说无法实现，可以看这篇文章！