CSS3 filter(滤镜) 制作图片高斯模糊无需JS
这是一个寂寞的工作日，因为没有女盆友所以很寂寞，因为很寂寞所以来写教程。希望再看教程的你也是单身！啊,知道你是单身枫瑞贼开心！爽的一B！！！起初我在不停的切图,UI小姐姐问了我一个问题关于图片高斯模糊的问题。PS制作高斯模糊就1分钟搞定，那对于程序员来说难吗？无法就是JS处理或者CSS3的filter滤镜处理
首先素材图片，看这是枫瑞女盆友，你们以及没机会了。小姐姐是我的了！（源文件中会打包）
我们先聊下一下基础：
1.filter：blur
filter 属性定义了元素(通常是<img>)的可视效果，blur属性给图像设置高斯模糊。”radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；举个栗子
filter: blur(5px);2.background: inherit;
值为inherit，则继承父元素属性
3.position: relative;
relative是相对定位，是相对于前面的容器定位的
4.position: absolute;
absolute这个是绝对定位；是相对于浏览器的定位
通俗说就是相对定位的绝对定位，relative是父，absolute是子。更具相对定位，来决定绝对定位的位置（怕新手会对这2个搞混）
5.overflow: hidden;
隐藏溢出，一个div大小为100，我图片为200，多余出来的就隐藏
好的先做开始我们的教程CSS3 filter(滤镜) 制作图片高斯模糊
方式一：直接使用flute
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3 filter(滤镜) 制作图片高斯模糊</title> <style> .gg{ filter: blur(3px);/* 高斯模糊 */ margin: 10% 35%;/* 让图片靠中间 */ } </style> </head> <body> <img class="gg" src="111.png" /> </body> </html>效果图：可以看到图片有模糊效果但是边缘也模糊了
方式二：定位模式处理图片边缘不模糊
方式二的原理是在图片上在用另一个一个div来做模糊效果然后覆盖上去，方式一是对图片直接做模糊效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3 filter(滤镜) 制作图片高斯模糊</title> <style> .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); } </style> </head> <body> <!-- 图片 --> <div class="feng"> <!-- 高斯模糊 --> <div class="rui"></div> </div> </body> </html>效果图
声明：
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：ceo@zunw.cn，我们将第一时间处理！
2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读网站声明。
