html做图片模糊效果,CSS3 filter(滤镜) 制作图片高斯模糊无需JS

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

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

首先素材图片，看这是枫瑞女盆友，你们以及没机会了。小姐姐是我的了！(源文件中会打包)

我们先聊下一下基础：

1.filter：blur

filter 属性定义了元素(通常是)的可视效果，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

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

.gg{

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

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

}

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

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

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

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);

}

效果图

原创文章，作者：枫瑞博客，如若转载，请注明出处：https://www.frbkw.com/1830/

html做图片模糊效果,CSS3 filter(滤镜) 制作图片高斯模糊无需JS相关推荐

css背景图片高斯模糊_CSS3 filter(滤镜) 制作图片高斯模糊无需JS
本帖最后由 fengrui99 于 2019-7-8 11:20 编辑这是一个寂寞的工作日,因为没有女盆友所以很寂寞,因为很寂寞所以来写教程.希望再看教程的你也是单身!啊,知道你是单身枫瑞贼开心!爽 ...
css3 filter url,CSS3 filter(滤镜) 属性
CSS3 filter(滤镜) 属性实例修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(100%); /* Chrome, Safa ...
巧用 CSS3 filter(滤镜) 属性
原文链接:CSS3 filter(滤镜) 属性效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...
ps实例二：使用高斯滤镜制作图片阴影效果？
实例二:使用高斯滤镜制作图片阴影效果 1.ctrl+单击图层,选中图片选区: 2.在该图层下面,新建一图层: 3.填充灰色:alt+delete(如果快捷键不行,就用油漆桶填充也行) 4.ctrl+D ...
CSS3 filter(滤镜) 百度汶川地震页面的使用
filter(滤镜)在生活中的使用今天是2018年5月12号,2008年汶川地震10年.特地去搜索了一下汶川地震.发现这个页面全部灰色的,突然想了一下,他是什么实现的.第一感觉是css3的filte ...
html的悬停图片圆形,css3炫酷圆形图片鼠标滑过特效
这是一款纯css3炫酷圆形图片鼠标滑过特效插件.在插件中,所有的缩略图都被用css3 border-radius制作成圆形,然后再在其上做各种鼠标滑过特效. HTML 所有demo的html结构都如下 ...
html动画图片重叠,CSS3炫酷堆叠图片展示动画特效
这是一款效果的CSS3炫酷堆叠图片展示动画特效.该堆叠图片展示效果是将一组图片堆叠在一起,然后以各种CSS动画效果来切换最上面的一张图片.该特效将使用纯CSS3制作,它可以在所有现代浏览器和移动设备上 ...
python制做简单图片代码_Python简单的制作图片验证码
-人人可以学Python-- 这里示范的验证码都是简单的,你也可以把字符扭曲人人可以学Python.png Python第三方库无比强大,PIL 是python的一个d第三方图片处理模块,我们也可以 ...
jar包导出无法显示图片或者音乐_如何制作图片视频短片，配上音乐闪耀朋友圈！...
把图片制作成视频短片,再配上一首好听的音乐,发到朋友圈,不仅可以更具创意的分享自己的生活点滴,更能因您的创意获得一大票的赞哦!看到别人分享自己制作的图片视频短片,是不是心痒痒也想做一个呢?今天就教你使 ...

html做图片模糊效果,CSS3 filter(滤镜) 制作图片高斯模糊无需JS

html做图片模糊效果,CSS3 filter(滤镜) 制作图片高斯模糊无需JS相关推荐

最新文章

热门文章