利用高斯模糊制作名片

高斯模糊介绍

高斯模糊（英语：Gaussian Blur），也叫高斯平滑，是在Adobe Photoshop、GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果，通常用它来减少图像噪声以及降低细节层次。这种模糊技术生成的图像，其视觉效果就像是经过一个毛玻璃在观察图像，这与镜头焦外成像效果散景以及普通照明阴影中的效果都明显不同。高斯平滑也用于计算机视觉算法中的预先处理阶段，以增强图像在不同比例大小下的图像效果（参见尺度空间表示以及尺度空间实现）。从数学的角度来看，图像的高斯模糊过程就是图像与正态分布做卷积。由于正态分布又叫作高斯分布，所以这项技术就叫作高斯模糊。图像与圆形方框模糊做卷积将会生成更加精确的焦外成像效果。由于高斯函数的傅立叶变换是另外一个高斯函数，所以高斯模糊对于图像来说就是一个低通滤波器。

高斯模糊制作名片

首先来认识一下Filter-css3属性：提供的图形特效，像模糊，锐化或元素变色。
过滤器通常被用于调整图片，背景和边界的渲染。

名称	说明
初始值	none
适用元素	图片元素、背景图元素、文字内容等，即所有元素使用
继承性	不继承
JS语法	object.style.WebkitFilter= “blur(20px)”

高斯模糊的用法：

1.添加属性：-webkit-filter: 属性名(属性值);
2.复合写法 : -webkit-filter: 属性名1(属性值1) 属性名2(属性值2) 属性名3(属性值3);

实现的原理就是在父容器设置了背景图片后，设置伪元素重叠并且设置模糊，绝对定位覆盖父元素即可。这样父容器中的子元素便可不受模糊度影响。

未添加高斯模糊

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>高斯模糊效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: url(./images/dui.webp);
            background-size: cover;
        }
      
        .img-show {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 750px;
            height: 450px;
            border: 2px solid #bebebe;
            border-radius: 15px;
            box-shadow: 8px 8px 20px rgba(0, 0, 0, .3), -8px -8px 20px rgba(0, 0, 0, .3);
            background: url(./images/aw.jpg);
            background-size: cover;
        }
		h1 {
			margin-top:60px;
			text-align:center;
		}
		h2 {
			margin-top:20px;
			text-align:center;
		}
    </style>
</head>
<body>
    <div class="img-show">
		<h1>自我介绍</h1>
		<h2>姓名：姜颖</h2>
	    <h2>性别：女</h2>
	    <h2>爱好：游戏，音乐等等</h2>
		<h2>职位：学生</h2>
	</div>
</body>
</html>

添加高斯模糊

这里是通过 ::before 伪元素实现，原理就是给 body 添加了一个拥有高斯模糊的遮罩层。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>高斯模糊效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: url(./images/dui.webp);
            background-size: cover;
        }
        body::before {
            content: "";
            position: absolute; /* 一定要用绝对定位 */
            width: 100%;
            height: 100%;
            backdrop-filter: blur(30px); /* 模糊半径 */
        }
        .img-show {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 750px;
            height: 450px;
            border: 2px solid #bebebe;
            border-radius: 15px;
            box-shadow: 8px 8px 20px rgba(0, 0, 0, .3), -8px -8px 20px rgba(0, 0, 0, .3);
            background: url(./images/aw.jpg);
            background-size: cover;
        }
		h1 {
			margin-top:60px;
			text-align:center;
		}
		h2 {
			margin-top:20px;
			text-align:center;
		}
    </style>
</head>
<body>
    <div class="img-show">
		<h1>自我介绍</h1>
		<h2>姓名：姜颖</h2>
	    <h2>性别：女</h2>
	    <h2>爱好：游戏，音乐等等</h2>
		<h2>职位：学生</h2>
	</div>
</body>
</html>

利用高斯模糊实现了我的名片，让名片更加美观，不让人眼花缭乱的。所以利用高斯模糊大大提高了美观感。

当青训营遇上码上掘金|利用高斯模糊制作我的名片