css 中backdrop-filter使用

一、概念与用途

backdrop-filter 用于在元素背后的区域应用图形效果。它允许我们改变元素背后内容的视觉效果,从而创造出新颖、引人注目的界面设计。通过应用不同的滤镜函数,我们可以为页面背景添加模糊、亮度调整、颜色变换等效果。

二、支持的滤镜函数

  1. blur(length): 对背景进行模糊处理,length 参数指定模糊半径。
  2. brightness(amount): 调整背景的亮度,amount 参数为亮度调整系数。
  3. contrast(amount): 调整背景的对比度,amount 参数为对比度调整系数。
  4. drop-shadow(h-offset v-offset blur radius color): 在背景上添加阴影效果,参数分别表示水平偏移、垂直偏移、模糊半径、扩展半径和颜色。
  5. grayscale(amount): 将背景转换为灰度图像,amount 参数指定灰度转换的程度。
  6. hue-rotate(angle): 改变背景的色相,angle 参数表示色相旋转的角度。
  7. invert(amount): 反转背景的颜色,amount 参数为反转程度。
  8. opacity(amount): 调整背景的透明度,amount 参数为透明度系数。
  9. saturate(amount): 调整背景的饱和度,amount 参数为饱和度调整系数。
  10. sepia(amount): 将背景转换为褐色色调,amount 参数指定褐色转换的程度。

示例demo

三、使用注意事项

  1. 性能影响backdrop-filter 可能会对页面性能产生影响,特别是在复杂的布局和大量使用滤镜的情况下。因此,在使用时应谨慎考虑其性能开销,并根据需要进行优化。
  2. 浏览器兼容性:虽然现代浏览器大多支持 backdrop-filter 属性,但仍有部分旧版浏览器可能不支持。因此,在使用前需要确认目标用户的浏览器兼容性情况,并考虑提供备选方案。
  3. 背景要求:为了使 backdrop-filter 生效,元素必须具有背景,否则滤镜效果将不会应用到任何内容上。可以通过设置 background-colorbackground-image 等属性来定义元素的背景。
  4. 层叠上下文backdrop-filter 应用于元素的背后内容,而不是元素本身。因此,它不会影响到元素内部的内容或子元素。同时,如果元素不在层叠上下文中,滤镜效果可能无法正确显示。

四、应用场景

backdrop-filter 在许多场景下都可以发挥出色的作用,例如:

  1. 模糊背景:为元素背后的内容添加模糊效果,营造出柔和、梦幻的视觉体验。
  2. 调整亮度与对比度:通过调整背景亮度和对比度,可以改变页面的整体色调和氛围。
  3. 色彩变换:使用 hue-rotatesepia 等滤镜函数,可以为背景添加特殊的色彩效果,增加页面的视觉吸引力。

五、示例代码

以下是一个简单的示例代码,演示了如何使用 backdrop-filter 为元素背后的内容添加模糊效果:

.element {position: relative;z-index: 1;backdrop-filter: blur(10px);background-color: rgba(255, 255, 255, 0.5);
}

在上面的代码中,.element 元素背后的内容将被应用模糊效果,同时元素的背景被设置为半透明的白色。

六、总结

backdrop-filter 是一个强大的 CSS 属性,通过它可以为页面背景添加各种图形效果。然而,在使用时需要注意其性能影响和浏览器兼容性,并根据实际需求进行适当的应用和优化。通过不断学习和实践,我们可以更好地掌握这一属性,并将其应用于实际项目中,创造出更加美观和引人入胜的界面效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/826133.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux对网络的监控操作学习--端口、流量、IP

文章目录 linux对网络的监控操作学习--端口、流量、IP理解Netfilter队列设置iptables规则以使用队列使用用户空间程序处理队列中的数据包linux用户空间使用Python实现使用rust实现功能 综合应用注意事项其他实现方式nftablesfirewalldufw (Uncomplicated Firewall)tc (Traffic …

Java面试必问题46:Gateway详解以及使用方法

Gateway(网关)是一种在微服务架构中起到请求转发、路由和过滤的作用的组件。它作为系统的入口点,接收所有的客户端请求,并将它们转发到相应的服务上进行处理。以下是Gateway网关的作用和使用方式的说明: 作用&#xff…

Java JNI调用本地方法1(调用C++方法)

一、基础概念 1、JNI(Java Native interface):sun公司提供的JNI是Java平台的一个功能强大的接口,实现java和操作系统本地代码的相互调用功能,系统本地代码通常是由其他语言编写的,如C。 二、JNI使用步骤 1、定义一个J…

选定进行压缩的卷可能已损坏。请使用chkdsk来修复损坏问题,然后尝试再次压缩该卷

Windows Server 2008R2环境下,进行磁盘重新分区时,想要对系统盘进行“压缩卷”,结果报错提示“选定进行压缩的卷可能已损坏。请使用Chkdsk来修复损坏问题,然后尝试再次压缩该卷。”这是硬盘出现了坏道导致的,硬盘出错无…

中仕公考:教师编制和事业单位d类一样吗?

教师编制和事业单位D类在考试内容、专业要求、晋升途径等方面有很大的不同中仕为大家介绍一下: 考试内容:教师编的考试包括教育综合知识和学科专业知识,有的地区会额外考公共基础知识。事业单位D类的考试更侧重于职业能力倾向测验和综合应用…

Linux的学习之路:14、文件(1)

摘要 有一说一文件一天学不完,细节太多了,所以这里也没更新完,这里部分文件知识,然后C语言和os两种的文件操作 目录 摘要 一、文件预备 二、c文件操作 三、OS文件操作 1、系统文件I/O 2、接口介绍 四、思维导图 一、文件…

uniapp全局监听分享朋友圈或朋友

把大象装进冰箱需要几步: 1、创建shart.js文件 export default{data(){return {//设置默认的分享参数//如果页面不设置share,就触发这个默认的分享share:{title:标题,path:/pages/index/index,imageUrl:图片,desc:描述,content:内容}}},onLoad(){let ro…

若依前后端部署到一起

引用:https://blog.csdn.net/qq_42341853/article/details/129127553 前端改造: 配置打包前缀 修改router.js 编程hash模式: 前端打包:npm run build:prod 后端修改: 添加thymeleaf包,和配置文件 spri…

JAVA 项目<果园之窗>_1

这几天有空看能不能把水果店管理系统整出来,目标是整个网页版本的,以我的电脑做服务器,数据存在mysql中 以我目前的理解整个项目大致可分为前端部分、后端部分、数据库部分,也就这三个部分 目前打开并运行了一个别人的项目&#…

leetcode(474.最大连续1的个数)(python)

看数据范围知,复杂度不超过(nlogn),不过感觉LeetCode很少卡算法时间。 题目要求数组的*****的个数,想到dp动态规划 dp[i][0]表示前i个数字,以第i个元素结尾,全为1的个数 dp[i][1]表示前i个数…

微信流量主、小程序、广告自助引流

微信流量主、小程序、广告自助引流 通过机器人实现自动化流程操作,解放双手,聚焦于核心价值 体验地址: 链接: 点击进入 功能描述: 启动执行时,抓取广告链接数据 对数据进行处理,广告链接形成信息列表并…

React间接实现一个动态组件逻辑

在开发一个浏览器插件的时候,用的plasmo框架和react支持的,里面使用react开发一个菜单功能,但是又不想使用react-router,所以就想着能不能使用一个很简单的方式做一个替代方案?那肯定是可以。 我在引入一个组件后&…

vue2响应式 VS vue3响应式

Vue2响应式 存在问题: 新增属性,删除属性,界面不会更新。 直接通过下标修改数组界面不会自动更新。 Vue2使用object.defineProperty来劫持数据是否发生改变,如下: 能监测到获取和修改属性: 新增的属性…

C++笔记:类和对象(一)

类和对象 认识类和对象 先来回忆一下C语言中的类型和变量,类型就像是定义了数据的规则,而变量则是根据这些规则来实际存储数据的容器。类是我们自己定义的一种数据类型,而对象则是这种数据类型的一个具体实例。类就可以理解为类型&#xff0c…

多标签与多分类的区别

多标签与多分类的区别 多标签多分类样本类别个数一个或多个只有一个输出一个标签维度的向量,每一维度是类别的概率[0.1, 0.6, 0.1, 0.1, 0.8]输出属于每个类别的概率[0.1, 0.6, 0.1, 0.1, 0.1]标签多标签的每一维度都是0或者1,类别可以共存,…

移除元素(C++)

给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度。 不要使用额外的数组空间,你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你不需要考虑数组中超出新长度后面…

line 1:20 no viable alternative at input ‘point,‘

背景 遇到一个蛋疼的问题,搞得老夫难受的一,解决了索性记录下 Creating a new SqlSession SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession61b0005f] was not registered for synchronization because synchronization is not activ…

coco128数据对象类别中英文对照json格式

中英对照 jsonarray [{id: 0,person: 人 }, {id: 1,bicycle: 自行车 }, {id: 2,car: 汽车 }, {id: 3,motorcycle: 摩托车 }, {id: 4,airplane: 飞机 }, {id: 5,bus: 公交车 }, {id: 6,train: 火车 }, {id: 7,truck: 卡车 }, {id: 8,boat: 船 }, {id: 9,trafficlight: 红绿灯 }…

java学习笔记8

15. 多态 15.1 多态概念 ​ java中**多态(Polymorphism )**是指不同对象在调用相同名称方法时,表现的多种不同行为。例如,要实现一个动物叫的方法,由于每种动物的叫声不同,因此可以在方法中接收一个动物参数,当传入的是猫类时发出猫叫,传入狗类时发出狗的叫声。 ​ ja…

python爬虫-----深入了解 requests 库(第二十五天)

🎈🎈作者主页: 喔的嘛呀🎈🎈 🎈🎈所属专栏:python爬虫学习🎈🎈 ✨✨谢谢大家捧场,祝屏幕前的小伙伴们每天都有好运相伴左右,一定要天天…