css backdrop-filter 实现背景滤镜

官方给出的定义是:backdrop-filter属性允许您将图形效果(如模糊或颜色偏移)应用于元素后面的区域。因为它适用于元素后面的所有内容,所以要查看元素或其背景的效果,需要透明或部分透明。

大致分为以下10种:

backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

根据上述10种,做了一张汇总图

 

同样直接贴一下源码吧

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>backdrop-filter</title><style>h3{text-align: center;}.container {display: flex;justify-content: flex-start;flex-wrap: wrap;}.box {position: relative;width: 20%;height: 200px;vertical-align: middle;border: 5px solid #FFFFFF;box-sizing: border-box;background: url('img/bg.png') no-repeat top;background-size: auto;}p {margin: 100px auto;color: #FFBB00;font-weight: bold;text-align: center;padding: 10px 0;background-color: transparent;}.box:nth-child(1) p {backdrop-filter: blur(10px);}.box:nth-child(2) p {backdrop-filter: brightness(60%);}.box:nth-child(3) p {backdrop-filter: contrast(40%);}.box:nth-child(4) p {backdrop-filter: drop-shadow(1px 1px 10px blue);}.box:nth-child(5) p {backdrop-filter: grayscale(60%);}.box:nth-child(6) p {backdrop-filter: hue-rotate(120deg);}.box:nth-child(7) p {backdrop-filter: invert(70%);}.box:nth-child(8) p {backdrop-filter: opacity(10%);}.box:nth-child(9) p {backdrop-filter: sepia(90%);}.box:nth-child(10) p {backdrop-filter: saturate(20%);}</style>
</head>
<body>
<h3>backdrop-filter属性各类值的效果</h3>
<div class="container"><div class="box"><p>模糊<br/>backdrop-filter: blur(10px)</p></div><div class="box"><p>亮度<br/>backdrop-filter: brightness(60%)</p></div><div class="box"><p>对比度<br/>backdrop-filter: contrast(40%)</p></div><div class="box"><p>下降阴影<br/>backdrop-filter: drop-shadow(4px 4px 100px blue)</p></div><div class="box"><p>灰度<br/>backdrop-filter: grayscale(60%)</p></div><div class="box"><p>色调旋转<br/>backdrop-filter: hue-rotate(120deg)</p></div><div class="box"><p>反转<br/>backdrop-filter: invert(70%)</p></div><div class="box"><p>不透明度<br/>backdrop-filter: opacity(20%)</p></div><div class="box"><p>深褐色<br/>backdrop-filter: sepia(90%)</p></div><div class="box"><p>饱和<br/>backdrop-filter: saturate(20%)</p></div>
</div>
</body>
</html>

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

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

相关文章

云计算十三课

centos安装 点击左上角文件 点击新建虚拟机 点击下一步 点击稍后安装操作系统&#xff0c;下一步 选择Linux&#xff08;l&#xff09;下一步 设置虚拟机名称 点击浏览选择安装位置 新建文件夹设置名称不能为中文&#xff0c;点击确定 点击下一步 设置磁盘大小点击下一步…

windows 系统远程连接 redis 服务

一、引言 Redis是一款开源的&#xff0c;内存中的数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息中间件。在开发过程中&#xff0c;我们可能需要从Windows系统远程连接到Redis服务器以进行各种操作。本文将详细介绍如何在Windows系统上远程连接Redis服务。 二、前…

【linux软件基础知识】完全公平调度(2)

每个进程的 CPU 时间比例 在两个可运行进程具有不同的好值的情况下&#xff0c;完全公平调度程序 (CFS) 根据权重为每个进程分配不同比例的处理器时间。 进程的权重由其nice值决定。 假设一个进程具有默认的 Nice 值&#xff08;零&#xff09;&#xff0c;而另一个进程的 Ni…

rust开发web服务器框架,github排名对比

Rocket Star最多的框架 github仓库地址&#xff1a;GitHub - rwf2/Rocket: A web framework for Rust. Rocket 是一个针对 Rust 的异步 Web 框架&#xff0c;重点关注可用性、安全性、可扩展性和速度。 Axum 异步运行时 githuh仓库地址&#xff1a;GitHub - tokio-rs/axum: …

高精度原理介绍及代码实现

目录 高精度 引入 使用场景 实现原理 高精度加法 数据存储 加法实现 总代码 高精度减法 与加法的不同点&#xff1a; 总代码 高精度乘法 总代码 高精度除法 总结 总注意点 减法注意点 高精度 引入 所谓高精度并不是很高级难懂的东西&#xff0c;只是对传统的…

【C++】多态(上)超详细

封装&#xff0c;继承&#xff0c;多态不只是C的三大特性&#xff0c;而是面向对象编程的三大特性。 什么是多态&#xff1a; 不同的对象做同一件事情&#xff0c;结果会出现多种形态。 1.满足多态的几个条件 1.父子类完成虚函数重写&#xff08;需要满足三同&#xff1a;函…

历史文件清理

应用系统中可能会被要求保存一些文件记录&#xff0c;比如配置文件修改的备份&#xff0c;日志文件&#xff0c;备份文件。不过历史文件不一定是要求永久保留的&#xff0c;一般会有合规要求和业务要求&#xff0c;超过一定期限的可以删除&#xff0c;以释放空间&#xff0c;提…

VP Codeforces Round 944 (Div 4)

感受&#xff1a; A~G 其实都不难&#xff0c;都可以试着补起来。 H看到矩阵就放弃了。 A题&#xff1a; 思路&#xff1a; 打开编译器 代码&#xff1a; #include <iostream> #include <vector> #include <algorithm> #define int long long using na…

ETL(抽取、转换、加载)

ETL&#xff08;抽取、转换、加载&#xff09; 目录 ETL&#xff08;抽取、转换、加载&#xff09; 1.抽取&#xff08;Extract&#xff09; 2.转换&#xff08;Transform&#xff09; 3. 加载&#xff08;Load&#xff09; 4.ETL 工具和技术 5.总结 ETL&#xff08;抽取、转…

编写Spring项目:流程与思路指南

编写Spring项目&#xff1a;流程与思路指南 本文以初级工程师的视角&#xff0c;介绍了Spring项目开发的全流程&#xff0c;从项目初始化到部署上线&#xff0c;每一步骤都配有必要的指导和建议。希望这份指南能够帮助初级工程师快速上手Spring项目开发&#xff0c;并在未来的…

【机器学习】数据分析特征

参考来源&#xff1a;https://www.bilibili.com/video/BV1nt411r7tj 1.数据质量分析 缺失值 异常值&#xff1a;箱线图 一致值&#xff08;多数据源不一致&#xff09; 2.图像可视化 占比&#xff1a;饼图、气泡图&#xff08;2-5维&#xff09; 波动图&#xff1a;折线…

Windows Docker 使用 httpd 部署静态 Web 站点

一、简介 httpd 是 Apache超文本传输协议&#xff08;HTTP&#xff09;服务器的主程序&#xff0c;是一个独立运行的后台进程&#xff0c;专门负责处理 HTTP 请求。它通过建立子进程或线程的池来高效管理请求&#xff0c;确保服务器能够迅速响应客户端的需求。httpd 因其高效率…

MySQL查询篇-聚合函数-窗口函数

文章目录 distinct 关键字聚合函数常见的聚合函数group by和having 分组过滤 窗口函数with as窗口聚合函数排名窗口函数值窗口函数 distinct 关键字 distinct 去重数据&#xff0c;ps:null值也会查出来 select distinct column from table;聚合函数 常见的聚合函数 select …

[AutoSar]BSW_Diagnostic_002 DCM模块介绍

目录 关键词平台说明背景一、DCM所处架构位置二、DCM 与其他模块的交互三、DCM 的功能四、DCM的内部子模块4.1 Diagnostic Session Layer (DSL)4.1 DSL 与其他模块的交互 4.2 Diagnostic Service Dispatcher (DSD)4.3 Diagnostic Service Processing (DSP)4.4 小结 关键词 嵌入…

linux程序分析命令(二)

linux程序分析命令(二) **ldd&#xff1a;**用于打印共享库依赖。这个命令会显示出一个可执行文件所依赖的所有共享库&#xff08;动态链接库&#xff09;&#xff0c;这对于解决运行时库依赖问题非常有用。**nm&#xff1a;**用于列出对象文件的符号表。这个命令可以显示出定…

Python元类:深入解析及其在框架开发中的应用

Python元类&#xff1a;深入解析及其在框架开发中的应用 一、引言 在Python中&#xff0c;元类&#xff08;Metaclass&#xff09;是一个高级特性&#xff0c;它允许我们控制类的创建过程。虽然在日常编程中&#xff0c;元类的使用可能并不频繁&#xff0c;但在框架开发、ORM…

莆田市C++专项选拔第二轮题4

题4&#xff1a;变换阵型 【题目描述】 盛隆同学刚学完C的二维数组和函数部分&#xff0c;于是他自己写了2个函数对二维数组进行练习。两个函数如下&#xff1a; int n, a[1005][1005]; // 注意&#xff0c;这里的n和数组a是全局变量 void f1() {for (int i 1; i < n; i)…

Python实现网页保持登录状态的技术方案及实际需求案例

文章目录 1. 使用Cookies直接管理2. 使用Web自动化工具3. 利用API Tokens4. 利用OAuth和其他认证机制5.Python实际需求案例5.1 方法一:多线程实现实现策略示例代码注意事项5.2 方法二:单例实现使用单例模式单例展示配合需求使用单例Python代码实现单例模式的优缺点5.3 方法一…

react 类组件 和 函数组件 声明周期 对比

React 的类组件和函数组件在生命周期方面存在一些差异。以下是它们之间的对比&#xff1a; 类组件的生命周期 React 类组件的生命周期可以分为三个阶段&#xff1a;挂载、更新和卸载。 1、挂载阶段&#xff1a; constructor()&#xff1a;组件实例化时调用&#xff0c;用于…

CNOCR和PaddleOCR提取pdf中文字-个人记录

目录 一、PyMuPDF 二、CNOCR 三、PaddleOCR 四、Tesseract&#xff08;没试&#xff09; 一、PyMuPDF 1.安装PyMuPDF pip install pymupdf 2.pdf转txt样例 import os import datetime import fitz # fitz就是pip install PyMuPDFdef pyMuPDF_fitz(pdfPath):startTime_p…