css3实现高斯模糊 filter(滤镜) 属性和backdrop-filter的区别

最新推荐文章于 2024-05-22 09:30:33 发布
最新推荐文章于 2024-05-22 09:30:33 发布
阅读量2.7k 收藏 6
点赞数
分类专栏： CSS 文章标签： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44447255/article/details/121939507
版权
本文介绍了CSS3的filter和backdrop-filter属性，用于实现元素的高斯模糊效果。filter属性会影响元素本身及其子元素，而backdrop-filter则只对元素背后的区域生效，需配合透明或半透明背景。由于backdrop-filter的兼容性问题，使用时需要注意设备支持。
摘要由CSDN通过智能技术生成

1.filter属性

 可以看出我们其实可以使用filter实现很多的效果。

2.backdrop-filter属性

backdrop-filter 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

3.filter和backdrop-filter具有一定区别：

  • Filter不仅仅作用于当前元素，后代元素也会继承这个属性，作用于一个空背景元素则没有效果。
  • backdrop-filter 是使透过该层的底部元素模糊化
  • backdrop-filter属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
  • backdrop-filter目前兼容性不佳，尤其是安卓移动端。

总结：</

最低0.47元/天 解锁文章
棠樾
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中如何使用高斯模糊
m0_47191887的博客
04-19 1166
高斯模糊 1.首先高斯模糊的用法很简单 用法： 添加属性：-webkit-filter（这个是Google Opera）: 属性名(属性值); filter()函数接受两个参数： //其中是指一个图像，是一个过滤器。 filter(<url>, <filter-function-list>) div { background: filter(url(path/to/img.jpg), blur(5px)); } 知道了用法来个简单的案例 先看看效果图 <!DOC
css3 背景模糊属性 背景滤镜 backdrop-filter
热门推荐
belladong126的博客
12-01 1万+
设计问我前端能否实现背景模糊的遮罩效果，我想我们应该感谢那些强大的css3开发者们，因为他们的努力才使得我恰好知道这个属性： backdrop-filter: blur(8px); 翻译理解记忆法仅供参考：背景幕布-过滤器 : 模糊(像素) backdrop-filter与filter的区别 filter：模糊内容 backdrop-filter:透过该层的底部元素模糊化 防止透过遮罩层内容过暗，配合了saturate(150%)使用，意为使…饱和，类似ps饱和度效果，<100%变暗，>10
css实现图片边缘模糊效果
最新发布
工作中遇到问题记录
05-22 975
css实现图片边缘模糊效果
CSS3 backdrop-filter() 实现背景毛玻璃效果，区别于 blur()
学习笔记
08-10 1万+
CSS3 backdrop-filter() 实现背景毛玻璃效果，区别于 blur() MDN相关说明 https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter 一个可以实现背景毛玻璃效果的 CSS 属性 平常使用的 filter 区别于 backdrop-filter filter 是模糊内容 backdrop-filt...
css3实现高斯模糊
小钢炮的博客
07-15 9741
css高斯模糊 1. 直接模糊 效果如下图： 代码： 模糊前： <div id="bg0"></div> 模糊后： <div id="bg"></div> <style type="text/css"> #bg0, #bg { width: 660px; height: 100px; background: url(1.png); } #bg { filter: blur(20px); } &l
CSS磨砂玻璃穿透效果 filter: blur(4px)；backdrop-filter: blur(4px)；
黄彪博客
07-05 1061
工作中，UCD 设计了一个“磨砂穿透”的效果，本想着画一个磨砂效果，然后在通过透明度穿透，实现“磨砂穿透”的效果，然而，看到。这篇文章，发现可以将这种效果做成一个通用的组件。
CSS3高斯模糊特效
FlyJapan_viba的博客
09-02 4383
参考网页： https://www.cnblogs.com/oxspirt/p/6251238.html CSS实现遮罩层透明文字不透明 https://blog.csdn.net/csu_passer/article/details/78406702 CSS3实现模糊背景的三种效果 https://www.cnblogs.com/zhaofeis/p/5938554.html CSS i...
css中filter属性和backdrop-filter的应用与区别详解
11-19
### CSS中`filter`属性和`backdrop-filter`的应用与区别详解 #### 一、`filter`属性 在CSS3中，`filter`属性提供了一种简单而强大的方式来为HTML元素应用各种视觉效果。这些效果包括但不限于模糊、亮度调整、对比...
react-backdrop-filter:React Backdrop Filter是使实验背景滤镜与画布配合使用的快速简便方法
05-19
React Backdrop Filter是一种向您的应用程序添加漂亮的背景滤镜的快速简便的方法。 重要的提示 如果导航器不支持css背景过滤器属性，则默认情况下，该组件将回退至html2canvas。 要禁用此行为，请记住将...
CSS-filter-Demo:微信小程序 CSS filter（滤镜）的使用示例
05-08
filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。 分类 none 默认值，没有效果。 blur() 高斯模糊 brightness() 亮度 contrast() 对比度 drop-shadow() 阴影 grayscale() 灰度 hue-rotate() 色相旋转...
微信小程序 CSS filter（滤镜）的使用示例详解
12-11
之前在看七月老师的视频的时候，看到了有一个样式是 -webkit-filter ，不知道是什么（我没咋学过CSS，嘿嘿，所以不知道是啥），于是查了一下，原来是滤镜吖。但是在微信小程序里使用的时候，下面一直飘红线，再仔细...
CSS3滤镜filter: blur,使图片或背景模糊(毛玻璃)
12-28
通过filter: blur()实现CSS毛玻璃效果，类似PS高斯模糊，图片和背景都可以使用；但在移动端，会造成卡顿，不建议在移动端使用；
backdrop-filter影响子元素定位
09-03
backdrop-filter影响子元素定位 html文件
CSS3技巧36：backdrop-filter 背景滤镜
九天翔龙的技术博客
09-09 1753
后续，CSS3 又新增了 backdrop-filter 背景滤镜。backdrop-filter 的属性值跟 filter 完全一样，只是应用效果的标签不同。filter：作用于标签本身。backdrop-filter：作用于被标签遮盖的内容。往往需要结合定位 position 属性实现遮盖效果。
CSS实现高斯模糊效果：filter、backdrop-filter
wnsry的博客
02-24 1563
高斯模糊是一种常见的效果（俗称毛玻璃效果），在CSS中使用filter、backdrop属性均可实现。 一、filter 这其实是一种“假”模糊，需要一层做背景并使用filter属性达到模糊效果，另一层（在背景层之上）设置一个半透明的背景色 background: rgba(255,255,255,0.2); filter: blur(20px); 二、backdrop-filter 这个属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必
毛玻璃之前世今生之filter与backdrop-filter
qq_23406545的博客
03-21 516
前言： ​ 大家好，我是Aben，这里是“Coding会客厅”，这个主题我将会用自己的理解介绍前端艺术，用尽量有趣的语言与生动的例子介绍更多前端方面的所见所闻，也欢迎各位新老朋友提出您在前端方面的见解，该系列文章将推出一百个案例作为分享，不定期更新，每月至少更新一次，欢迎各位订阅、收藏与评论，也欢迎你们将这档节目分享给更多的人。山水有相逢，让我们一起加入今天的“Coding会客厅”吧。 ​ 今集我们会一起聊聊关于毛玻璃特效下的filter（滤镜）属性与利用css3的新特性backdrop-filter。我们
CSS backdrop-filter 和filter两种高斯模糊的区别
Obito_TXP的博客
09-06 1214
1. dropback-filter: 用法：直接作用于当前元素，当前元素及其父元素，或其背景都会被高斯模糊 看到浏览器兼容列表详情，我以为webkit内核浏览器就能兼容此属性，可经测试以下情况并不支持： 搜狗浏览器极速模式 360浏览器极速模式， 火狐浏览器也是不支持的，有以上要求的，就要慎用了 /* 关键字值 */ backdrop-filter: none; /* URL方式外链SVG filter */ backdrop-filter: url(zxx.svg#filter); /* .
傻傻分不清楚？深入探讨 filter 与 backdrop-filter 的异同
奇舞周刊
01-05 3126
本文将深入探讨在 CSS 中两个非常类似的属性 -- filter 和 backdrop-filter。它们都能完成某些滤镜功能，但是它们肯定也存在差异。那么，为什么在 CSS 中有了 f...
css 高斯模糊实现
qq_36723759的博客
09-03 385
css 毛玻璃效果先上效果图vue代码css代码 先上效果图 vue代码 <template> <div class="login-view"> <transition name="slide-fade"> <div class="wrap" v-if="show"> <div class="login-field"> <div class="login-content">
实现模糊遮罩效果除了backdrop-filter还可以用什么
07-14
3. 使用背景图片和 CSS `::after` 伪元素：你可以为元素添加一个背景图片，并使用 `::after` 伪元素覆盖在上面，然后通过设置透明度和模糊效果来实现遮罩效果。例如： ```css .element { position: relative; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值