CSS滤镜：filter与backdrop-filter的区别与应用

版权申诉
1 下载量 30 浏览量 更新于2024-09-11 收藏 574KB PDF 举报
CSS中的filter属性和backdrop-filter是两个强大的样式控制工具，它们各自具有独特的作用和应用范围。filter属性主要用于为元素及其内容应用各种视觉特效，如透明度调整（opacity）、高斯模糊（blur）和反色（invert）等。这个属性不仅可以直接作用于元素本身，而且会向下穿透到子元素，因此可以创造出丰富的动态视觉效果。例如，通过设置opacity，可以调整元素的不透明度；使用blur可以实现元素的模糊效果，用于模拟远距离观察或运动模糊；而invert则可以将图像反转成相反的颜色。 相比之下，backdrop-filter属性更为特殊，它主要作用于元素的“背景区域”。backdrop-filter用于为元素背后的空间添加图形效果，比如模糊或者颜色偏移。这意味着backdrop-filter不会影响元素本身，而是影响元素内容在背景上的表现。要观察backdrop-filter的效果，元素需要有一定的透明度，否则无法显现其背后的处理。然而，backdrop-filter的兼容性目前并不理想，特别是在Android移动端，可能需要谨慎使用。 在实际应用中，你可以像下面这样结合这两个属性来增强页面设计： ```css body { display: flex; width: 100%; height: 100vh; align-items: center; justify-content: center; } .img { width: 500px; height: 500px; filter: opacity(.3); /* 设置元素本身的透明度 */ } .backdrop-img { position: relative; /* 为了backdrop-filter生效，需要绝对或相对定位 */ filter: backdrop-filter(blur(2px) invert(1)); /* 对元素背景应用模糊和反色效果 */ } <body> <img src="./img/kyoto.jpg" class="img"> <div class="backdrop-img"></div> </body> ``` 总结来说，filter属性侧重于元素自身的视觉特效，而backdrop-filter则更关注背景区域的处理，两者在实现不同的视觉效果时各有优势。了解并掌握这两个属性，可以帮助设计师在CSS3中创建出更具创新性和交互性的视觉体验。同时，开发者需要关注浏览器兼容性问题，确保在各类设备和平台上都能提供良好的用户体验。

微信小程序 使用filter过滤器几种方式

2021-03-29 上传
由于微信小程序 技术生态比较闭合，导致很多 现代前端框架很多积累出的成果都没有实现(可能未来会逐一实现). 用惯了现代 再耍小程序 总感觉很不顺手. 需要结果的请直接看最后的WXS ### View Filter filter 理解为管道加工处理, 你扔给我一组数据 经过各种不同类型的管道加工 产出新的数据 但是又不会影响修改原数据, 最终展示给用户. 现有前端框架filter一般: time | dateTime('yyy-mm-dd') 使用 | 作为管道符 传递参数进行序列化 缺陷: 截止目前,小程序官方并没有管道实现方式,以下列出了替代几种方案，供大家选择使用. 直接修改原数据 在请

tailwindcss-filters:Tailwind CSS插件生成过滤器和背景过滤器实用程序

2021-05-17 上传
黑人的命也是命 意识到。 生气。 做得更好。 需求变化。 尽一切可能显示您的支持。 单击上面的链接以找到抗议，请愿书和其他帮助方法。 不要让它变得安静。 Tailwind CSS的过滤器插件 要求 此插件需要Tailwind CSS 1.2或更高版本。 如果您的项目使用的是较早版本的Tailwind，则应安装此插件的最新2.x版本（ npm install tailwindcss-filters@2.x ）。 安装 npm install tailwindcss-filters 用法 // tailwind.config.js module . exports = { theme : { filter : { // defaults to {} 'none' : 'none' , 'grayscale' : 'grayscale(1)' ,

CSS-filter-Demo:微信小程序 CSS filter（滤镜）的使用示例

2021-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

详解filter与fixed冲突的原因及解决方案

2020-11-21 上传
当在 body 中使用了 filter 滤镜属性的时候，会导致 fixed 元素定位发生错误，即不再相对 viewport 进行定位，而是相对整个网页（ body 元素）进行定位。 <html> <head> <title>css filter ...

猫咪桌上睡觉CSS3动画特效.zip

2019-07-04 上传
除此之外，CSS3还提供了许多其他特性来增强动画效果，如`transition`用于单一状态间的过渡，`transform`用于元素的旋转、缩放、移动等空间变换，以及`filter`和`backdrop-filter`用于模糊、颜色调整等视觉效果。...

flip-card-blur-bg-back

2021-05-16 上传
模糊背景通常是通过CSS的`filter`属性中的`blur()`函数来实现的。例如： ```css .flip-card-back { background-image: url('path/to/image.jpg'); backdrop-filter: blur(5px); } ``` 这将为卡片的背面应用...

Glassmorphism-Digital-Clock-UI-Design

2021-03-27 上传
在CSS中，我们可以使用`backdrop-filter`属性来实现背景模糊，例如： ```css .element { backdrop-filter: blur(5px); } ``` 透明度则可以通过调整元素的`opacity`或使用`rgba()`颜色值来控制。例如： ```css ....

glassmorphism-Calculator:JavaScript中的简单Glassmorphism计算器

2021-04-28 上传
可以使用`backdrop-filter`属性结合`blur`值来实现元素背景的模糊效果，同时设置合适的`opacity`来调整透明度。此外，使用`box-shadow`可以模拟出玻璃边缘的立体感。 2. **布局设计**：为了保持计算器的可读性和...

详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

2021-01-21 上传
要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？ 一、兼容性不一 CSS3 box-shadow从IE9浏览器开始就支持了，兼容性如下截图： 而filter中的drop-shadowIE13才开始支持，移动端Android4.4才开始支持。兼容性如下图： 二、同样的参数值，表现效果有差异 filter中的drop-shadow语法如下： filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值); filter:dr

react-backdrop-filter:React Backdrop Filter是使实验背景滤镜与画布配合使用的快速简便方法

2021-05-19 上传
React背景过滤器 React Backdrop Filter是一种向您的应用程序添加漂亮的背景滤镜的快速简便的方法。 重要的提示 如果导航器不支持css背景过滤器属性，则默认情况下，该组件将回退至html2canvas。 要禁用此行为，请记住将canvasFallback设置为false。 使用后备时，该组件使用 。 画布的计算和渲染速度很慢，因此无法很好地处理页面中的动画和移动。 建议与静态元素一起使用或禁用后备功能，并。 安装 # Yarn yarn add react-backdrop-filter # NPM npm install react-backdrop-filter 用法 import BackdropFilter from "react-backdrop-filter" ; render ( ) { return ( < div cla
weixin_38650516
  • 粉丝: 11
  • 资源: 971
上传资源 快速赚钱

最新资源