CSS背景虚化

news2024/11/16 22:00:50

.mark{
	background-color: rgba(0,0,0,.1);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

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

/* 关键词值 */
backdrop-filter: none;

/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 滤镜函数值 */
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%);

/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;

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

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

相关文章

MYSQL 高级SQL语句(二)

目录 一、表连接查询 1.1 left join&#xff08;左连接&#xff09; 1.2 right join&#xff08;右连接&#xff09; 1.3 inner join&#xff08;内连接&#xff09; 二、视图 2.1 视图表与派生表比较 一、表连接查询 MYSQL数据库中的三种连接&#xff1a; inner join(内…

pytorch分类和回归:阿里天池宠物年龄预测

文章目录 dog年龄预测论文Deep expectation of real and apparent age from a single image without facial landmarks分类的损失函数1.多分类交叉熵损失函数&#xff1a;2.KLDiv Loss&#xff1a; 分布差异3.facenet 三元组损失函数 timm and torchvisiontorchvision 尝试一&a…

刚创业,租什么类型办公场地比较合适

对于刚创业的公司&#xff0c;选择哪种类型的办公场地取决于公司的规模、预算和业务需求。以下是一些选择办公场地的考虑因素&#xff1a; 1. 灵活性&#xff1a;初创企业可能需要随着业务的发展和变化而快速调整办公空间。因此&#xff0c;选择一个灵活的办公场地&#xff0c…

深入学习 Redis - 深挖经典数据类型之 zset

目录 前言 一、zset 类型 1.1、操作命令 zadd / zrange&#xff08;添加 / 查询&#xff09; zcard&#xff08;个数&#xff09; zcount&#xff08;区间元素个数&#xff09; zrevrange&#xff08;逆序展示&#xff09; zrangebyscore&#xff08;按分数找元素&#…

服务器(容器)开发指南——SSH打洞开发

文章目录 SSH容器服务打包测试服务文件镜像打包 SSH打洞开发部署带SSH的容器SSH连接服务器&#xff08;容器内部&#xff09;SSH访问容器内的缺陷 IDE远程SSH开发VSCode远程SSH开发Jetbrains系列产品SSH远程开发 在进行定制化的服务开发时&#xff0c;我们有时候只能在固定的服…

页面设计—GridRow栅格行组件

1、何时使用 在栅格布局基础上&#xff0c;一般需要通过行&#xff08;GridRow&#xff09;和列&#xff08;GridCol&#xff09;来定义信息区块的外部框架&#xff0c;以保证页面的每个区域能够稳健地排布起来。 2、如何使用 &#xff08;1&#xff09;找到GridRow组件&…

乙酰基四肽-2--------增加肌肤紧实度,重建表皮结构

简介 为了避免皮肤下垂和松弛&#xff0c;以下几种重要蛋白共同参与&#xff0c;维持皮肤结构的粘着和紧致&#xff1a;Fibulin 5亦称FBLN-5&#xff0c;是细胞外基质蛋白Fibulin家族中的最新成员。它广泛分布于富含弹性纤维的组织&#xff0c;能直接与原弹性蛋白结合&#xf…

【矩特征】图像矩特征

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 cv2.moments() 矩特征 1. 正文 (1). 空间矩 零阶矩&#xff1a;m00一阶矩&#xff1a;m10,m01二阶矩&#xff1a;m20,m11,m02三阶矩&#xff1a;m30,m…

配置Tomcat远程调试

配置Tomcat远程调试 1.Tomcat开启远程访问调试1.1 编写脚本,开启配置1.2 重启Tomcat服务 2. IDEA配置远程调试Tomcat2.1 IDEA右上角更改配置2.2 添加一个remote jvm debug2.3 进行配置2.4 配置后进行启动连接至此在本地打断点即可调试远程服务器 1.Tomcat开启远程访问调试 1.1…

Cesium:加载geojson面贴地和显示边界问题

1.背景 cesium加载geojson面数据后&#xff0c;有部分数据在地形下面显示不全&#xff0c; 加了clampToGround: true&#xff0c;设置贴地后&#xff0c;边界又不见了 this.viewer.dataSources.add(GeoJsonDataSource.load(http://xx/xzbj.geojson, {stroke: Color.BLACK.with…

questasim一个

安装好questasim后默认的波形查看界面字体很小&#xff0c;颜色看起来也不舒服&#xff0c;所以调整了一下颜色布局如下图&#xff0c;顺便记录一下波形窗口颜色大小及选中行高亮如何设置 1、波形字体颜色设置 参考如何设置一个清爽的仿真窗口&#xff08;仿真工具使用技巧&a…

vue build 打包遇到bug解决记录

文章目录 vue-cli-service servevue打包修改dist文件夹名字vue build require is not defined 和 exports is not defind 错误 vue-cli-service serve 通常vue是不能直接使用vue-cli-service命令在终端运行的&#xff0c;所以才会在package.json中配置了scripts&#xff1a; …

精选 2023 年大厂高频 Java 面试真题集锦(含答案),面试一路开挂

本文涵盖了阿里巴巴、腾讯、字节跳动、京东、华为等大厂的 Java 面试真题&#xff0c;不管你是要面试大厂还是普通的互联网公司&#xff0c;这些面试题对你肯定是有帮助的&#xff0c;毕竟大厂一定是行业的发展方向标杆&#xff0c;很多公司的面试官同样会研究大厂的面试题。 …

小程序轮播图的两种后台方式(PHP)--【浅入深出系列008】

微信目录集链接在此&#xff1a; 详细解析黑马微信小程序视频–【思维导图知识范围】难度★✰✰✰✰ 不会导入/打开小程序的看这里&#xff1a;参考 让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】 文章目录 本系列校训学习资源的选择啥是轮播图轮播…

基于Android系统的外卖APP【纯干货分享,免费领源码04871】

摘要 立足于当下餐饮行业现有的点餐模式&#xff0c;分析传统APP点餐的运作流程&#xff0c;结合Android系统的特点设计新型的外卖APP。近几年&#xff0c;人们生活水平日益提升&#xff0c;但工作强度和压力不断增强&#xff0c;尤其是对于上班族而言&#xff0c;到餐厅吃饭费…

C++实现通用进制转换

C实现通用进制转换 #include <iostream> #include <string> #include <algorithm> #include <sstream> using namespace std; // 将一个字符转换为对应的数字 int charToNum(char c) { if (c > 0 && c < 9)return c - 0; el…

四旋翼无人机使用教程

文章目录 前言一、检查遥控器电源开关混控拨码开关微调开关飞行模式刹车开关行程开关接收机对码 二、检查飞机检查接线 三、解锁并飞行 前言 PX4固件 QGC地面站 Pixhwak飞控 Mc6c遥控器 开源飞控博大精深&#xff0c;欢迎广大爱好者加博主微信名片&#xff0c;一起学习交流。…

Windows版filehub安装教程

一个基于Github开发的文件存储软件&#xff0c;美其名曰&#xff1a;FileHub&#xff0c;可存万物&#xff0c;而且绝不和谐任何文件。类似于百度云盘的功能&#xff0c;但是功能上肯定达不到百度云盘的效果&#xff0c;但是基本功能还是有的&#xff1a;例如登录注册&#xff…

C语言每天一练:输出杨辉三角

题目&#xff1a;请输出以下杨辉三角(要求输出前10行) 列&#xff1a; 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 ...... 题解析&#xff1a;不了解杨辉三角的可以百度看一下&#xff0c;大概是这样的&#xff0c;咱们就可以解…

日撸代码300行:第55天(基于 M-distance 的推荐 (续))

代码来自闵老师”日撸 Java 三百行&#xff08;51-60天&#xff09;“&#xff0c;链接&#xff1a;https://blog.csdn.net/minfanphd/article/details/116975957 工作承接第54天的基于M-distance 的推荐&#xff0c;目标是自己实现一下user-based recommendation。原博客中的…