HTML 和 CSS 来实现毛玻璃效果（Glassmorphism）
毛玻璃效果简介
它的主要特征就是半透明的背景，以及阴影和边框。
同时还要为背景加上模糊效果，使得背景之后的元素根据自身内容产生漂亮的“变形”效果，示例：
代码实现
首先，创建一个 HTML 文件，写入如下内容：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Glassmorphism effect</title>
</head>
<body><!-- code goes here -->
</body>
</html>为 body 标签添加一些样式，并使用鲜艳的颜色和渐变作为背景：
body {padding: 4.5rem;margin: 0;background: #edc0bf;background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);font-family: 'Inter', sans-serif;
}现在基本的标签和样式做好了，接下来在 body 标签里创建一个卡片元素：
<div class="card"><h3 class="card-title">Glassmorphism is awesome</h3><p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p><a href="https://ui.glass">Read more</a>
</div>添加样式
.card {width: 400px;height: auto;padding: 2rem;border-radius: 1rem;
}.card-title {margin-top: 0;margin-bottom: .5rem;font-size: 1.2rem;
}p, a {font-size: 1rem;
}a {color: #4d4ae8;text-decoration: none;
} 你要做的只是设置一个半透明背景颜色，并使用 backdrop-filter 属性设置模糊效果。在 .card 元素的样式中加入以下 CSS：
.card {/* other styles */background: rgba(255, 255, 255, .7);-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);
}
后方没有形状时的效果
让我们使用 img 标签在 body 起始标签之后加入一个形状图片：
<img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt=""> 并为 .shape 元素添加以下样式，将其定位在页面的合适位置：
.shape {position: absolute;width: 150px;top: .5rem;left: .5rem;
}效果如下图所示：
完整代码html和css代码如下：
glass.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="glass.css"><title>Glassmorphism effect</title>
</head>
<body><img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt=""><!-- code goes here -->
<div class="card"><h3 class="card-title">Glassmorphism is awesome</h3><p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p><a href="https://www.baidu.com">Read more</a>
</div>
</body>
</html>glass.css:
body {padding: 4.5rem;margin: 0;background: #edc0bf;background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);font-family: 'Inter', sans-serif;
}.card {width: 400px;height: auto;padding: 2rem;border-radius: 1rem;background: rgba(255, 255, 255, .7);webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);
}.card-title {margin-top: 0;margin-bottom: .5rem;font-size: 1.2rem;
}p, a {font-size: 1rem;
}a {color: #4d4ae8;text-decoration: none;
}.shape {position: absolute;width: 150px;top: .5rem;left: .5rem;
}
相关文章：
HTML 和 CSS 来实现毛玻璃效果（Glassmorphism）
毛玻璃效果简介 它的主要特征就是半透明的背景，以及阴影和边框。 同时还要为背景加上模糊效果，使得背景之后的元素根据自身内容产生漂亮的“变形”效果，示例： 代码实现 首先，创建一个 HTML 文件，写入如下…...
【技术】国标GB28181视频平台EasyGBS通过对应密钥上传到其他平台展示的详细步骤
国标GB28181协议视频平台EasyGBS是基于国标GB28181协议的视频云服务平台，支持多路设备同时接入，并对多平台、多终端分发出RTSP、RTMP、FLV、HLS、WebRTC等格式的视频流。平台可提供视频监控直播、云端录像、云存储、检索回放、智能告警、语音对讲、平台级…...
SpeedBI数据可视化工具：浏览器上做分析
SpeedBI数据分析云是一种在浏览器上进行数据可视化分析的工具，它能够将数据以可视化的形式呈现出来，并支持多种数据源和图表类型。 所有操作，均在浏览器上进行 在浏览器中打开SpeedBI数据分析云官网，点击【免费使用】进入&#…...
8.21笔记
Deeplab-MSc-LargrFOC 此图除了主输出之外，还有五个支线输出，他们池化层与VGG网络不同，其中卷积核大小是3，而VGG中卷积核大小为2（这个网络一开始是基于VGG网络提出的，因为那时候提出比较早，没有…...
MyBatis-Plus中公共字段的统一处理
数据库中一些表的公共字段，例如修改时间、修改人、创建时间、创建人，我们一般都是这样来处理的： employee.setCreateTime(LocalDateTime.now()); employee.setUpdateTime(LocalDateTime.now()); employee.setCreateUser(UserHolder.get()); …...
SQL的导出与导入
1、导入 使用命令行导入 1.登录sql界面； 2.create database Demo新建一个库； 3.选中数据库use Demo；选中导入路径source D:Demo.sql; 4.查看表show tables; 2、导出 整个sql mysqldump -u username -ppassword dbname > dbname.sq…...
记录一次wordpress项目的发布过程
背景：发布一套已完成的代码到线上，有完整的代码包，sql文件，环境是linux 宝塔。无wordpress相关经验。 过程：正常的发布代码 问题1：访问自己的域名后跳转到别的域名。 解决： 修改数据表wp_optio…...
HTML详解连载（8）
HTML详解连载（8） 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽浮动-产品区域布局场景 解决方法清除浮动方法一：额外标签发方法二：单伪元素法方法三：双伪元素法方法四：overflow浮动-总结…...
Linux系统之安装OneNav个人书签管理器
Linux系统之安装OneNav个人书签管理器 一、OneNav介绍1.OneNav简介2.OneNav特点 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本3.3 检查本地yum仓库状态 四、安装httpd服务4.1 安装httpd4.2 启动httpd服务4…...
主程技术分享: 游戏项目帧同步,状态同步如何选
网络游戏开发项目中帧同步,状态同步如何选？ 网络游戏的核心技术之一就是玩家的网络同步,主流的网络同步有”帧同步”与”状态同步”。今天我们来分析一下这两种同步模式。同时教大家如何在自己的项目中采用最合适的同步方式。接下来从以下3个方面来阐述: 对啦&…...
ChatGPT-4: 半年的深度使用思考
几个月的时间一直在使用 ChatGpt-4，以口述语音转文字的形式说一下自己的体会。 1、选择版本 大前提：我使用的都是 GPT4 的版本。也就是说至少每个月要付费20$。 因为 3.5 的版本，实际上使用体验是非常差的，主要体现在答非所问上。…...
【健康医疗】Axure用药提醒小程序原型图，健康管理用药助手原型模板
作品概况 页面数量：共 20 页 兼容软件：Axure RP 9/10，不支持低版本 应用领域：健康管理，用药助手 作品申明：页面内容仅用于功能演示，无实际功能 作品特色 本作品为「用药提醒」小程序原型图…...
ERROR in static/js/xxx.js from UglifyJs
老项目用的webpack3，打包的时候遇到**ERROR in static/js/xxx.js from UglifyJs**这个报错， UglifyJS是个包含JS解释器、代码最小化、压缩、美化的工具集，是前端开发打包的最常用工具之一，只支持ES5，不支持ES6&#x…...
阿里云ECS服务器安装PostgreSQL
1. 概述 PostgreSQL是一个功能强大的开源数据库，它支持丰富的数据类型和自定义类型，其提供了丰富的接口，可以自行扩展其功能，支持使用流行的编程语言编写自定义函数 PostgreSQL数据库有如下优势： PostgreSQL数据库时…...
【核磁共振成像】傅里叶重建
目录 一、傅里叶重建二、填零三、移相四、数据窗函数五、矩形视野六、多线圈数据重建七、图像变形校正八、缩放比例九、基线校准 长TR，长TE，是T2加权像； 短TR，短TE，是T1加权像； 长TR，短TE&#…...
Camunda 工作流节点跳转 - 多实例节点判断和跳转
在多种工作流引擎中，Camunda框架对流程的处理控制更为强大、灵活。 在应对流程节点按业务需要进行自由跨节点跳转的需求时，通过代码自由控制节点的跳转在Camunda中是支持的，并且提供了编码方法，其中多实例的处理上有一些区别要特…...
MySQL不停重启问题
MySQL不停的自动杀掉自动重启 看一下log日志 my.cnf 里配置的 log_error /var/log/mysqld.log vim /var/log/mysqld.log 报的错误只是 [ERROR] Cant start server: Bind on TCP/IP port: Address already in use [ERROR] Do you already have another mysqld server …...
ol-cesium 暴露 Cesium viewer 对象以及二三维切换、viewer 添加点功能示例
ol-cesium 暴露 Cesium viewer 对象以及二三维切换、viewer 添加点功能示例 核心代码完整代码在线示例 二三维一体化的概念一直都比较火热，虽然大多数都是狭义的概念，但是很多需求方也想要这样的功能。 Openlayers 官方出了一个二三维一体化的工具&…...
国产化-达梦数据库安装2
目录 DM8数据库下载地址 安装一路狂飙next 启动服务 随着国家政府的推广、越来越多的政府项目、在系统部署需要采购国产服务器、数据库等 DM8数据库下载地址 https://eco.dameng.com/download/ 安装一路狂飙next windos安装比较简单直接next即可 仅仅记录几个关键疑问地方k…...
延长OLED透明屏的使用寿命：关键因素与有效方法分享
OLED透明屏作为一项创新的显示技术，具备透明度和高清晰度的特点，在各个领域得到了广泛应用。 然而，为了确保OLED透明屏的持久性和稳定性，延长其使用寿命是至关重要的。根据最新的研究和数据报告， 在这篇文章中&#…...
域名是指哪一部分？
域名是指互联网中用于识别和定位网站的地址。它是由多个部分组成的，每个部分都具有特定的含义和功能。下面是有关域名各个部分的解释。 顶级域名（Top-Level Domain，TLD）： 顶级域名是域名的最高级别部分，通常…...
MPP 还是主流架构吗
MPP 架构： MPP 架构的产品： Impala ClickHouse Druid Doris 很多 OLAP 引擎都采用了 MPP 架构 批处理系统 - 使用场景分钟级、小时级以上的任务，目前很多大型互联网公司都大规模运行这样的系统，稳定可靠，低成本。…...
ubuntu查看网速
使用speedomster测试网速 sudo apt-get install speedometer 查询需要测速的网卡 speedometer -r ens33 -t ens33 -r: 指定网卡的接收速度 -t: 指定网卡的发送速度 使用nload测试 sudo apt-get install nload 测速 nload -t 200 -i 1024 -o 128 -U M 参数含义࿰…...
【官方中文文档】Mybatis-Spring #使用 MyBatis API
使用 MyBatis API 使用 MyBatis-Spring，你可以继续直接使用 MyBatis 的 API。只需简单地使用 SqlSessionFactoryBean 在 Spring 中创建一个 SqlSessionFactory，然后按你的方式在代码中使用工厂即可。 public class UserDaoImpl implements UserDao {//…...
go gorm belong to也就是多对一的情况
多位员工属于同一个公司，一个公司包含多个人，关系放在多的那一部分 belongs to 会与另一个模型建立了一对一的连接。 这种模型的每一个实例都“属于”另一个模型的一个实例。 例如，您的应用包含 user 和 company，并且每个 user 能…...
亚马逊云科技 云技能孵化营——机器学习心得
亚马逊云科技 云技能孵化营机器学习心得 前言什么是机器学习？机器学习如何解决业务问题？什么时候适合使用机器学习模型？总结 前言 很荣幸参加了本次亚马逊云科技云技能孵化营，再本期的《亚马逊云科技云技能孵化营》中，…...
Django实现音乐网站 ⒀
使用Python Django框架制作一个音乐网站， 本篇主要是推荐页-推荐排行榜、推荐歌手功能开发。 目录 推荐页开发 推荐排行榜 单曲表增加播放量 表模型增加播放量字段 执行表操作 模板中显示外键对应值 表模型外键设置 获取外键对应模型值 推荐排行榜视图 推…...
PySide6学习笔记--基础环境的安装配置
PySide6介绍 QT官方发布Qt6.0之后，紧接着于2020年12月10日发布了PySide 6，对应C版的Qt6。从PySide6开始，PySide的命名也会与Qt的大版本号保持一致。需要注意的是使用PySide6开发的程序在默认情况下，不兼容Windows7系统，…...
算法通关村第九关——中序遍历与搜索树
1 中序遍历和搜索树原理 二叉搜索树按照中序遍历正好是一个递增序列。其比较规范的定义是： 若它的左子树不为空，则左子树上所有节点的值均小于它的根节点的值；若它的右子树不为空，则右子树所有节点的值均大于它的根节点的值&…...
测试框架pytest教程（5）运行失败用例-rerun failed tests
# content of test_50.py import pytestpytest.mark.parametrize("i", range(50)) def test_num(i):if i in (17, 25):pytest.fail("bad luck") 运行这个文件，2个失败，48个通过。 要运行上次失败的测试用例，可以使用--l…...
网站升级建设方案/云优客seo排名公司
Lock是java.util.concurrent.locks包下的一个接口 主要方法有： Lock接口的实现类 Lock相关实现类还可以定义公平锁，如ReentrantLock(boolean) package cn.itcats.thread.safe.Test1;import java.util.concurrent.locks.Lock; import java.util.concurre…...
学做面包网站/最新新闻热点话题
大家好，我叫亓官劼（q guān ji ），在CSDN中记录学习的点滴历程，时光荏苒，未来可期，加油~博客地址为：亓官劼的博客，亓官劼的博客2。 第十一届 蓝桥杯 省 模拟赛 完整题目题…...
没有数据怎么做网站/国家免费职业培训平台
最近有空就着迷于java的世界，希望可以把自己的lind重构一个java版本出来，虽然遇到一些小问题，但也都解决了，还是那句话，知识需要积累，程序员需要一个追求！ 类抽象类接口泛型类泛型接口非泛型类继…...
毕业设计代做网站都有哪些/如何建网站
作者： 小马哥 rstevens (rstevens2008hotmail.com) 欢迎转载，未经允许，请勿用于商业目的1. 定义 Packet： 通过网卡收发的报文，包括链路层、网络层、传输层的协议头和携带的数据 Data Buffer：用…...
我的专业网站建设策划书/安卓aso优化工具
广度优先搜索，深搜超时 需要判断界限，做标记，已到过的地点就不必去了 #include<cstdio> #include<iostream> using namespace std; int head0,tail1; int n,k; int f[199999]; int d[9999999]; int t[9999999]; int bfs(int w) …...
广东网站制作哪家强/外贸网站搭建推广
SSM养老院信息管理系统摘 要随着互联网趋势的到来，各行各业都在考虑利用互联网将自己推广出去，最好方式就是建立自己的互联网系统，并对其进行维护和管理。在现实运用中，应用软件的工作规则和开发步骤，采用Java技术建设…...