backdrop-filter 和filter 写出高斯模糊效果 以及两者区别

最新推荐文章于 2025-07-06 07:23:59 发布
转载 最新推荐文章于 2025-07-06 07:23:59 发布 · 577 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/u/3407699/blog/1927107
文章标签：

#python

本文介绍了CSS中的backdrop-filter属性，该属性可以为元素的背景添加模糊效果，但仅支持iOS端。若目标元素包含其他内容，则推荐使用filter属性。需要注意的是，此属性在安卓设备上暂不支持。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

backdrop-filter：blur(10px);只支持ios端；只作用于当前元素；

适用场景：为背景添加模糊效果；如果目标元素内包裹着其他内容 则应用filter属性；

（不支持安卓，效果不明显）

转载于:https://my.oschina.net/u/3407699/blog/1927107

backdrop-filter 高级用法：毛玻璃与液态模糊效果，让你的网页不再平庸
weixin_41455464的博客
07-01 354
如果你也厌倦了网页上那些平淡无奇的背景，想给你的用户带来一些视觉上的惊喜，那这篇文章绝对值得你花几分钟看看。是一个非常强大的 CSS 属性，它可以让你轻松实现各种酷炫的视觉效果，让你的网页不再平庸。，一个作用于自身，一个作用于背景，一个像自拍美颜，一个像给照片背景加滤镜，分工明确，各有千秋。各位看官，今天咱们聊点儿前端里的小魔法，一个能让你的网页瞬间变得高级又迷人的CSS属性——它能模糊、调整颜色，甚至扭曲你元素背后的图像，创造出各种各样酷炫的效果。记住，前端的世界，没有最酷，只有更酷！
毛玻璃之前世今生之filter与backdrop-filter
qq_23406545的博客
03-21 632
前言： ​ 大家好，我是Aben，这里是“Coding会客厅”，这个主题我将会用自己的理解介绍前端艺术，用尽量有趣的语言与生动的例子介绍更多前端方面的所见所闻，也欢迎各位新老朋友提出您在前端方面的见解，该系列文章将推出一百个案例作为分享，不定期更新，每月至少更新一次，欢迎各位订阅、收藏与评论，也欢迎你们将这档节目分享给更多的人。山水有相逢，让我们一起加入今天的“Coding会客厅”吧。 ​ 今集我们会一起聊聊关于毛玻璃特效下的filter（滤镜）属性与利用css3的新特性backdrop-filter。我们
css实现磨砂效果（filter 与 backdrop-filter 的对比分析）
Zing_ing的博客
08-10 1749
在 CSS 中实现磨砂效果（类似于 iOS 的磨砂玻璃效果）通常结合使用 backdrop-filter 属性和半透明的背景色。</</</
傻傻分不清楚？深入探讨 filter 与 backdrop-filter 的异同
奇舞周刊
01-05 3998
本文将深入探讨在 CSS 中两个非常类似的属性 -- filter 和 backdrop-filter。它们都能完成某些滤镜功能，但是它们肯定也存在差异。那么，为什么在 CSS 中有了 f...
backdrop-filter
weixin_48785875的博客
07-21 723
背景模糊效果等
使用backdrop-filter实现elementui官网的模糊滤镜效果的和毛玻璃效果
动感超人的博客
11-25 2406
backdrop-filter属性filter属性二者区别二者支持的滤镜对比(其实filter可以用的,backdrop-filter都可以用) 我们重点关注下面几个属性 为什么设置background-size和background-image :设置背景图片大小,这个不用多说设置背景图片的大小所以我们如果只设置这二个值会发生什么?为了便于观看,我将换为了一张具体图片,便于查看 初次的时候你可能看到这个效果是不是觉得这个点点是什么,我们放大看看 可以看到,只不过背景被替换为了一个一个
css3实现高斯模糊 filter(滤镜) 属性和backdrop-filter的区别
棠樾的博客
12-14 2915
需求：需要添加一层高斯模糊的蒙层 那我们就来看一下强大的filter属性： 可以看出我们其实可以使用filter实现很多的效果。 现在我们看一下高斯模糊的代码实现： // 蒙层的样式 .background-maskCell { position: fixed; right: 0; left: 0; top: 0; bottom: 0; width: 100%; height: 100%; z-index: 101..
css中filter属性和backdrop-filter的应用与区别详解
11-19
### CSS中`filter`属性和`backdrop-filter`的应用与区别详解 #### 一、`filter`属性 在CSS3中，`filter`属性提供了一种简单而强大的方式来为HTML元素应用各种视觉效果。这些效果包括但不限于模糊、亮度调整、对比...
web端css实现高斯模糊：filter/backdrop-filter
reffrselom的博客
12-20 2317
客户要求实现前端实现毛玻璃效果：即PS中的高斯模糊效果 翻了翻资料发现还真是能实现，甚至连正片叠底效果都能实现，不得不感慨css3的日益强大。 1. dropback-filter: 用法：直接作用于当前元素，当前元素及其父元素，或其背景都会被高斯模糊 /* SVG 过滤器 */ backdrop-filter: url(commonfilters.svg#filter); /* <fil...
【高频考点精讲】CSS backdrop-filter实战：如何实现iOS风格的毛玻璃效果？
最新发布
全栈老李的博客
07-06 610
backdrop-filter这个属性虽然简单，但用好了真的能让你的设计质感提升一个档次。不过老李还是要提醒大家，特效虽好，不要贪杯——始终要记得考虑性能和用户体验的平衡。如果你对这类CSS高级特效感兴趣，不妨关注老李的专栏，下周我们会深入讲解CSS clip-path的创意用法，教你如何用纯CSS实现那些看似需要PS才能完成的高级图形效果！（全栈老李原创，转载请联系授权）
CSS-filter-Demo:微信小程序 CSS filter（滤镜）的使用示例
05-08
前言 之前在看七月老师的视频的时候，看到了有一个样式是-webkit-filter，不知道是什么，于是查了一下，原来是滤镜吖。但是在微信小程序里使用的时候，下面一直飘红线，再仔细查了一下，原来是在Chrome, Safari, Opera中使用 -webkit-filter，而微信小程序里使用的话，使用filter就可以了。一时间好奇了下，就多试了几个函数，以下是详细的笔记 定义 filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。 分类 none 默认值，没有效果。 blur() 高斯模糊 brightness() 亮度 contrast() 对比度 drop-shadow() 阴影 grayscale() 灰度 hue-rotate() 色相旋转 invert() 反色 opacity() 透明度 saturate() 饱和度 sepia() 复古色 ur
微信小程序过滤器
CherryCola_zjl的博客
11-22 523
微信小程序新增的 .wxs 文件可完成vue过滤器的功能 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/ //filter.wxs var filterMoney = function (money) { if(money){ return money.toFixed(2) }else{ ...
backdrop-filter,让你的网站熠熠生”毛’
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
05-13 8543
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！ 原文链接 ==>http://sylblog.xin/archives/42 前言 不知道大家有没有经常看到这种设计。 这种效果我们称之为毛玻璃效果。相信使用苹果的同学会很熟悉这种设计。 backdrop-filter 可以说是 CSS 中为毛玻璃量身定制的一.
关于微信小程序background真机调试图片不显示问题（已填坑！）
qq_31630961的博客
12-17 4836
如下代码 前端wxml 在开发者工具里是可以显示，到真机调试却不行，不显示图片，引用的是绝对路径的图片，开始以为是路径问题，改成相对路径，发现也是同样问题。 解决方案 只能将图片放到服务器上，引用服务器的图片地址，完美解决，放本地不可以，或者是将图片转换成base64格式。 切记，域名一定要https开头！ ...
微信小程序背景图虚化
allein_STR的博客
07-06 8196
微信小程序背景图虚化 filter: blur(10rpx);
微信小程序开发uniapp+uview：实现毛玻璃效果
Y_soon_start的博客
07-07 2567
通过直接在CSS中使用filter来设置实现高斯模糊效果，其实filter是一种“假模糊”，因为需要一层做背景并且使用filter属性来达到模糊效果，另外一层（需要在背景层上面 ）设置一个半透明的背景色，二者结合使用，才能达到模糊效果。设置backdrop-filter : blur()属性，并且结合background : rgba()来实现按钮的高斯模糊效果。属性其实可以让开发者为一个元素后面区域添加图形效果，因为它适用于元素背后的所有元素，为了能够看到效果，必须使元素或者背景设置为部分透明。
firefox火狐浏览器开启backdrop-filter高斯模糊
qq_38835219的博客
12-09 2059
firefox火狐浏览器开启backdrop-filter高斯模糊 在火狐浏览器地址栏输入about:config，回车之后页面出现输入框 在输入框内输入layout.css.backdrop-filter.enabled 点击右侧的切换按钮切换为 true ok,到此完成了backdrop-filter的开启工作 ...
backdrop-filter和filter
03-08
### CSS `backdrop-filter` 和 `filter` 的区别 #### 功能定位 - **Filter**: 此属性应用于元素本身及其内容，通过一系列滤镜函数改变视觉效果。这些变化可以包括模糊、颜色转换等多种图像处理操作[^1]。 - **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值