CSS设置高斯模糊效果

高斯模糊（英语：Gaussian Blur），也叫高斯平滑，是在Adobe Photoshop、GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果，通常用它来减少图像噪声以及降低细节层次。这种模糊技术生成的图像，其视觉效果就像是经过一个毛玻璃在观察图像。

实现效果

上方的文字好像放在了一个毛玻璃下面，一种若隐若现的感觉。

代码

<div class="header"></div>
<h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, quae?</h1>
<h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, quae?</h1>

body {background-color: bisque;
}
.header {height: 80px;position: sticky;box-shadow: 0 1px 4px 0 rgba(0,0,0,.16);top: 0;backdrop-filter: blur(4px);
}

最重要的代码就是backdrop-filter: blur(4px)，你可以把4px增大，就会表现出更加模糊的效果。

CodePen-毛玻璃效果预览

文章首发于 IICOOM-个人博客|技术博客 《CSS设置高斯模糊效果》

CSS设置高斯模糊效果相关推荐

Android中为网络图片设置高斯模糊效果
参考了这篇文章: Android:简单靠谱的动态高斯模糊效果写一个方法,用来对Bitmap进行高斯模糊: public static Bitmap blurBitmap( ...
前端css 页面高斯模糊效果
问题:前端如何制作高斯模糊的背景图最近在开发模仿APP页面,制作mp3播放器背景的时候,需要用到高斯模糊的背景图,前端如何实现呢? 这时候我们就要说到 CSS 3 中的一个属性Filter 了. 先 ...
微信小程序开发：实现高斯模糊效果（毛玻璃效果）
前言在微信小程序开发的时候,也会遇到一些和在前端开发一样的样式需求,二者的相通类似性非常的高,就拿样式相关的需求来说,可以说是一模一样的操作.那么本文就来分享一个关于实现高斯模糊效果的需求,微信小程 ...
CSS背景图片高斯模糊效果
问题来源背景图片的高斯模糊效果已经屡见不鲜了,最典型的也就是QQ音乐的播放器页面,看起来有种回忆过去的感觉.CSS如何实现这种效果呢?其实也很简单,利用CSSfilter属性就能实现,下面是在uni ...
CSS实现背景图片高斯模糊效果
效果演示未添加高斯模糊的效果: 代码: body {background: url(./images/bg.jpg);background-size: cover; } 添加了高斯模糊的效果: 代码 ...
js实现图片虚化_js canvas画布实现高斯模糊效果
最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果.在实现局部模糊效果前,首先能够实现全部模糊.经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础上,经过一番修改,和备注,实 ...
Flutter ImageFilter 高斯模糊效果 BackdropFilter 实现过滤效果
在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不 ...
Android使用RenderScript实现图片的高斯模糊效果
Android使用RenderScript实现图片的高斯模糊效果首先来看一下什么是高斯模糊效果呢? 高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe Photoshop.G ...
css如何添加模糊效果,css动态模糊效果
实例效果:请把鼠标放上去看看第一步:把下面的脚本插入与之间: function on(she){ girl=she move=setInterval("moving(girl)" ...

CSS设置高斯模糊效果

实现效果

代码

CSS设置高斯模糊效果相关推荐

最新文章

热门文章