本帖最后由 fengrui99 于 2019-7-8 11:20 编辑

这是一个寂寞的工作日，因为没有女盆友所以很寂寞，因为很寂寞所以来写教程。希望再看教程的你也是单身！啊,知道你是单身枫瑞贼开心！爽的一B！！！起初我在不停的切图,UI小姐姐问了我一个问题关于图片高斯模糊的问题。PS制作高斯模糊就1分钟搞定，那对于程序员来说难吗？无法就是JS处理或者CSS3的filter滤镜处理

首先素材图片，看这是，你们以及没机会了。小姐姐是我的了

6d48b8a1b8ff655.jpg (54.94 KB, 下载次数: 0)

2019-7-8 11:17 上传

我们先聊下一下基础：

1.filter：blur

filter 属性定义了元素(通常是)的可视效果，blur属性给图像设置高斯模糊。”radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；举个栗子

[Asm] 纯文本查看 复制代码filter: blur(5px);

2.background: inherit;

值为inherit，则继承父元素属性

3.position: relative;

relative是4.position: absolute;

absolute这个是5.overflow: hidden;

隐藏溢出，一个div大小为100，我图片为200，多余出来的就隐藏好的先做开始我们的教程CSS3 filter(滤镜) 制作图片高斯模糊

方式一：直接使用flute

[Asm] 纯文本查看 复制代码

CSS3 filter(滤镜) 制作图片高斯模糊

.gg{

filter: blur(3px);/* 高斯模糊 */

margin: 10% 35%;/* 让图片靠中间 */

}

效果图：可以看到图片有模糊效果但是边缘也模糊了

db6c6ab31fe3f1c.png (134.91 KB, 下载次数: 0)

2019-7-8 11:18 上传

方式二：定位模式处理图片边缘不模糊

方式二的原理是在图片上在用另一个一个div来做模糊效果然后覆盖上去，方式一是对图片直接做模糊效果

[Asm] 纯文本查看 复制代码

CSS3 filter(滤镜) 制作图片高斯模糊

.feng{

background: url(111.png) no-repeat;/* 引入背景图片 */

position: relative;/* 相对定位 */

width: 380px;/* 作为背景引入要给高宽 */

height: 385px;/* 作为背景引入要给高宽 */

margin: 10% 35%;/* 让图片在中间一点随意写下 */

}

.rui{

position: absolute;/*绝对定位 */

background: inherit;/* 继承属性 */

width: 380px;/* 给div高宽 */

height: 385px;/* 给div高宽 */

filter: blur(5px);

}

效果图

2a38a7bf350b66a.png (123.04 KB, 下载次数: 1)

2019-7-8 11:19 上传