CSS:backdrop-filter实现毛玻璃的效果

实现效果

在这里插入图片描述
实现代码

/* 关键属性 */
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);

完整代码

<style>/* 遮罩层 */.mo-mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 100%;background-color: #1e80ff;}.mo-dialog {border-radius: 16px;height: 400px;width: 600px;margin: 100px auto;/* 关键属性 */background-color: rgba(255, 255, 255, 0.4);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}</style><div class="mo-mask"><div class="mo-dialog"></div></div>

参考文章

  • 前端笔记 - 【CSS】 - filter 于 backdrop-filter

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

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

相关文章

【数据结构】链表的分类和双向链表

本篇是基于上篇单链表所作&#xff0c;推荐与上篇配合阅读&#xff0c;效果更加 http://t.csdnimg.cn/UhXEj 1.链表的分类 链表的结构非常多样&#xff0c;以下情况组合起来就有8种&#xff08;2 x 2 x 2&#xff09;链表结构&#xff1a; 我们一般叫这个头为哨兵位 我们上回…

树,二叉树及其相关知识

1.树概念及结构 1.1树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因 为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 有一个特殊的结点&#…

Tarjan 算法(超详细!!)

推荐在 cnblogs 上阅读 Tarjan 算法 前言 说来惭愧&#xff0c;这个模板仅是绿的算法至今我才学会。 我还记得去年 CSP2023 坐大巴路上拿着书背 Tarjan 的模板。虽然那年没有考连通分量类似的题目。 现在做题遇到了 Tarjan&#xff0c;那么&#xff0c;重学&#xff0c;开…

长城资产信息技术岗24届校招面试面经

本文介绍2024届秋招中&#xff0c;中国长城资产管理股份有限公司的信息技术岗岗位一面的面试基本情况、提问问题等。 10月投递了中国长城资产管理股份有限公司的信息技术岗岗位&#xff0c;所在部门为长城新盛信托有限责任公司。目前完成了一面&#xff0c;在这里记录一下一面经…

vue中图片不显示问题 - vue中静态资源加载

文章目录 vue中图片不显示问题静态资源URL 转换规则webpack 静态资源处理 图片不显示问题问题描述解决办法1&#xff1a;使用require引入require is not defined 解决办法2&#xff1a;使用import引入解决办法3&#xff1a;将图片放进公共文件夹static或public vue中图片不显示…

数据的存储结构

1.类别 顺序存储、链式存储、散列存储、索引存储 2.顺序存储与链式存储的区别 顺序存储链式存储优点 可以实现随机存取每个元素占用最少的空间 充分利用所有存储单元&#xff0c;不会出现碎片现象。缺点 只能使用整块的存储单元&#xff0c;会产出较多的碎片。 需要额外的存…

steam搬砖项目到底能不能做?新手小白入场前必看!

相信大家对于steam平台都不陌生。它是全球最大的中心化游戏平台。许多游戏将被添加到这个平台上。玩家通过这个平台购买游戏并体验游戏。大家经常看我的文章&#xff0c;应该对steam搬砖有或多或少的了解。 steam搬砖项目其实就是通过steam购买CSGO国外服务器游戏装备、皮肤、…

拷贝构造复习笔记

拷贝构造 使用一个已经创建完毕的对象来初始化一个新对象 默认情况下&#xff0c;c编译器至少给一个类添加3个函数 1&#xff0e;默认构造函数(无参&#xff0c;函数体为空) 2&#xff0e;默认析构函数(无参&#xff0c;函数体为空) 3&#xff0e;默认拷贝构造函数&#x…

what is `ContentCachingRequestWrapper` does?

ContentCachingRequestWrapper 是 Spring Framework 中提供的一种包装类&#xff0c;它扩展了 HttpServletRequestWrapper 类&#xff0c;用于缓存请求体的内容。 通常在处理 HTTP 请求时&#xff0c;原生的 HttpServletRequest 对象中的输入流 (getInputStream()) 只能被读取一…

C++:C/C++内存管理

C&#xff1a;C/C内存管理 C语言C语言内存分配回顾malloc & calloc & realloc & free Cnew & deletenew[ ] & delete[ ]定位newnew & delete原理 malloc / free 与 new / delete对比 C语言 C语言内存分配回顾 我们先回顾一下C语言的内存分配&#xf…

JS中splice方法的用法总结

1. 概述 JavaScript中的splice()方法是用于增加、删除或替换数组中的元素。这个方法可以实现数组的细粒度操作,非常灵活和强大。 2. 语法 splice()方法的语法如下所示: start:必需,表示开始删除或插入的索引位置。如果为负数,则从数组的末尾开始计算。deleteCount:可选…

音乐证书通过率发布,市场对持有者需求旺盛

音乐证书的考试难度备受关注&#xff0c;通过率终于揭晓。据官方公布的数据&#xff0c;该证书的通过率相对较低&#xff0c;需要考生在音乐技能和表现方面有出色的表现。然而&#xff0c;持有音乐证书的人才在市场上需求旺盛&#xff0c;各种音乐机构和企业对其表现出强烈兴趣…