导航栏模糊背景 out 了? 来看看这种模糊是否合你胃口? 并且学习 backdrop-filter

最新推荐文章于 2025-08-19 14:04:20 发布
原创 最新推荐文章于 2025-08-19 14:04:20 发布 · 735 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#学习 #css #firefox #backdrop-filter

文章介绍了如何使用CSS的backdrop-filter属性创建新颖的导航栏效果，类似于Element-Plus官网的点阵式模糊。backdrop-filter允许将模糊、色彩偏离等效果应用到元素背后的区域，需配合半透明背景。文中详细讨论了各种滤镜的效果，如blur、brightness、drop-shadow等，并特别指出drop-shadow需要前后元素同时应用，而opacity需与其他滤镜结合才能显现效果。文章还提供了一种使用径向渐变创建点阵式背景的方法，以实现独特的导航栏设计。

导航栏模糊背景 out 了? 来看看这种模糊是否合你胃口? 并且学习 backdrop-filter

传统情况模糊导航栏效果 🆚 一种比较新的模糊导航栏效果(比如 Element-Plus 官网的导航栏效果, 有些类似密集点阵式)

在这里插入图片描述

在这里插入图片描述

导航栏要实现这个效果必须设置背景为有透明的颜色并且通过 backdrop-filter 使用 filter. 看来我们必不可绕过 backdrop-filter

backdrop-filter

backdrop-filter 允许开发者将模糊或色彩偏离等图形效果应用到元素背后的区域. 因为它应用于元素背后所有内容, 因此如果你想要看到效果必须将元素的背景设置部分透明.

backdrop-filter 只有一个关键词属性值, none 表示不应用任何滤镜.

在这里插入图片描述

<section class="grid">
  <div class="part none"></div>
  <div class="part blur"></div>
最低0.47元/天 解锁文章
react-backdrop-filter:React Backdrop Filter是使实验背景滤镜与画布配合使用的快速简便方法
05-19
React Backdrop Filter是一种向您的应用程序添加漂亮的背景滤镜的快速简便的方法。 重要的提示 如果导航器不支持css背景过滤器属性，则默认情况下，该组件将回退至html2canvas。 要禁用此行为，请记住将...
css导航条毛玻璃效果(backdrop-filter: blur(4px))
徐同保的专栏
08-07 650
css导航条毛玻璃效果(backdrop-filter: blur(4px))
backdrop-filter filter
qq_42451776的博客
08-31 854
文章目录filterbackdrop-filter filter 用于图片模糊 img { filter: blur(10px); } backdrop-filter 用于背景模糊,不会影响元素上面的内容 .box { width: 600px; height: 400px; border: 1px solid #f5f5f5; backdrop-filter: blur(2px); border-radiu
父子组件之间互相影响backdrop-filter的css效果
Chinese_wawa_summer的博客
07-30 1298
UI现在很爱使用backdrop-filter这个设计，以前没发现啥问题，开始做地图以后，面板后面挂了一张地图，父子组件之间关于这个效果的影响就格外明显了。当父组件是用来backdrop-filter的设置，子组件也想使用的时候，效果会受到影响，我遇到的是子组件不生效，不知道会不会出现别的情况。2.在子组件上使用使用伪元素，将backdrop-filter的毛玻璃效果使用到伪元素上，这样子组件的背景就不会受到影响。第二个解决方案，我在使用的过程中出现了，子组件的所有内容都被毛玻璃覆盖。
CSS中backdrop-filter与fliter属性
qq_64071349的博客
07-30 1261
z-index属性用来设置堆叠顺序（不过在这里不用也行，因为在这个例子里只有。属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。的所有元素，为了看到效果，必须使元素或其背景至少部分透明。二、来理解backdrop-filter属性的例子。为省事，我直接修改w3school上的内容。filter将元素中的内容变得模糊。介绍mdn文档中对这两个属性的介绍。三、来理解filter属性的例子...
css 中backdrop-filter使用
qwguo
04-17 2139
是一个强大的 CSS 属性，通过它可以为页面背景添加各种图形效果。然而，在使用时需要注意其性能影响和浏览器兼容性，并根据实际需求进行适当的应用和优化。通过不断学习和实践，我们可以更好地掌握这一属性，并将其应用于实际项目中，创造出更加美观和引人入胜的界面效果。它允许我们改变元素背后内容的视觉效果，从而创造出新颖、引人注目的界面设计。通过应用不同的滤镜函数，我们可以为页面背景添加模糊、亮度调整、颜色变换等效果。元素背后的内容将被应用模糊效果，同时元素的背景被设置为半透明的白色。
CSS backdrop-filter：给元素背景添加模糊与色调的高级滤镜
探索技术与生活
08-19 1553
backdrop-filter是CSS中实现毛玻璃效果的核心属性，通过模糊元素背后的背景内容（而非元素自身）来提升界面质感。与filter不同，它能保持元素内容清晰，常用于导航栏、模态框等半透明组件。支持多种滤镜函数（如模糊、亮度、对比度调整），并可组合使用创建复杂效果。典型应用包括：毛玻璃导航栏（半透明背景+模糊）、弱化背景的遮罩层、卡片悬停特效等。需注意元素需设置半透明背景且背后有内容才能显现效果。该属性能显著增强UI的视觉层次感和现代感。
backdrop-filter 高级用法：毛玻璃与液态模糊效果，让你的网页不再平庸
weixin_41455464的博客
07-01 590
如果你也厌倦了网页上那些平淡无奇的背景，想给你的用户带来一些视觉上的惊喜，那这篇文章绝对值得你花几分钟看看。是一个非常强大的 CSS 属性，它可以让你轻松实现各种酷炫的视觉效果，让你的网页不再平庸。，一个作用于自身，一个作用于背景，一个像自拍美颜，一个像给照片背景加滤镜，分工明确，各有千秋。各位看官，今天咱们聊点儿前端里的小魔法，一个能让你的网页瞬间变得高级又迷人的CSS属性——它能模糊、调整颜色，甚至扭曲你元素背后的图像，创造出各种各样酷炫的效果。记住，前端的世界，没有最酷，只有更酷！
css3：背景模糊，玻璃效果backdrop-filter
sunluyi的博客
05-19 781
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } img{ width: 290px; height: 390px; } ul{ width: 290px; height: 3
backdrop-filter,让你的网站熠熠生”毛’
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
05-13 8616
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！ 原文链接 ==>http://sylblog.xin/archives/42 前言 不知道大家有没有经常看到这种设计。 这种效果我们称之为毛玻璃效果。相信使用苹果的同学会很熟悉这种设计。 backdrop-filter 可以说是 CSS 中为毛玻璃量身定制的一.
css如何做玻璃效果_如何实现苹果官网的毛玻璃效果
weixin_34620163的博客
12-28 1781
前言最近忙着补各类知识点，攒了很多篇文章没有写，但是这个还是很有意思的，简单写一下。我的专栏用来分享一些我认为比较有意思的知识，如果你觉得这篇文章没什么技术含量可以不看或者自己去写两篇，这么简单的东西都写不出来还在我的评论区冷嘲热讽显得你很睿智？技术交流，交流技术，想交流别的内容可以开贴细说。苹果官网的毛玻璃效果Gif图效果可能不太好，可以自己去苹果官网看：Apple (中国大陆) - 官方网站​...
Backdrop Filter
肥晨开发的学习之路
12-26 1万+
CSS 滤镜 : backdrop-filter backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果。 滤镜： 名称： 方法案例： 效果： blur() 模糊 : blur(5px) brightness() 亮度 : brightness(1.4); contrast() 对比度 :...
使用backdrop-filter实现elementui官网的模糊滤镜效果的和毛玻璃效果
动感超人的博客
11-25 2488
backdrop-filter属性filter属性二者区别二者支持的滤镜对比(其实filter可以用的,backdrop-filter都可以用) 我们重点关注下面几个属性 为什么设置background-size和background-image :设置背景图片大小,这个不用多说设置背景图片的大小所以我们如果只设置这二个值会发生什么?为了便于观看,我将换为了一张具体图片,便于查看 初次的时候你可能看到这个效果是不是觉得这个点点是什么,我们放大看看 可以看到,只不过背景被替换为了一个一个
导航条动态模糊效果实现原理实战
weixin_45785873的博客
04-29 1174
上微博时发现，在我向下看内容的时候，发现内容滚动到顶部的导航栏就变模糊了，觉得很有趣，就自己尝试的去写一个试试
模拟哔哩哔哩导航条模糊效果
weixin_30809333的博客
11-15 304
在自己之前做的一个视频播放的网站的项目中，由于没有专业的设计，只有一个PS大神。所以在做页面的时候，如何布局如何设计页面的责任就落在了我这个前端学徒工的身上。 那时候自己用的最熟练的就是盒子模型，所以我就会把页面整体划分为一个一个的盒子，盒子间的互相嵌套构成了整个页面。第一个难点就是做一个导航条，如果仅仅是做一个导航条并不复杂，但自己初生牛犊不怕虎，觉得必须做一个有逼格的导航条，所以一眼就瞄上了...
苹果导航条的高斯模糊效果（css）
深圳最菜前端
09-22 1756
今天接到一个需求，实现一个高斯模糊半透明的效果，以前没有写过这种效果，今天实现了，做一个记录 这个是给出的设计稿 可以看到，在免费预约门店的位置，滑动下来的文案，是一个毛玻璃效果，底部的绿色是固定的 // 底部容器 .btn-bottom{ width: 750rpx; height: 303rpx; position: fixed; bottom: 0; left: 0; background-color: rgba(126, 194, 36, .8); backdrop-filter:
导航栏背景全透明效果的实现（沉浸式效果）
diaochuanzhi7826的博客
07-07 1055
航歌 转载于:https://www.cnblogs.com/CH520/p/9275999.html
css 设置背景图片模糊效果
热门推荐
凌风的博客
07-17 2万+
效果： html: &lt;div class="head_channel"&gt; &lt;div class="head_box"&gt; //这里是内容区域 &lt;/div&gt; &lt;div class="blur_bj"&gt; &lt;img src="https://
用这个属性backdrop-filter写一个模糊化的例子给我
最新发布
11-19
以下是两个使用 `backdrop-filter` 属性实现模糊化的示例代码： #### 示例一：模糊化背景图 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模糊化背景图</title> <style> body { background-image: url("image/bjt03.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; backdrop-filter: blur(30px); } </style> </head> <body> </body> </html> ``` 此示例中，通过 `backdrop-filter: blur(30px);` 对整个页面的背景图进行了模糊处理，模糊半径为 30px [^1]。 #### 示例二：结合饱和度调整的模糊效果 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>结合饱和度的模糊效果</title> <style> body { backdrop-filter: saturate(150%) blur(8px); -webkit-backdrop-filter: saturate(150%) blur(8px); background-color:rgba(0,0,0,.3); } </style> </head> <body> </body> </html> ``` 该示例使用 `backdrop-filter: saturate(150%) blur(8px);` 不仅对背景进行了模糊处理，还将饱和度调整为 150%，同时设置了背景颜色的透明度 [^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值