当前位置： 首页 > news >正文

HTML 和 CSS 来实现毛玻璃效果（Glassmorphism）

news 2025/9/14 8:38:58

毛玻璃效果简介

        它的主要特征就是半透明的背景，以及阴影和边框。

同时还要为背景加上模糊效果，使得背景之后的元素根据自身内容产生漂亮的“变形”效果，示例：

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）

毛玻璃效果简介 它的主要特征就是半透明的背景&#xff0c;以及阴影和边框。 同时还要为背景加上模糊效果&#xff0c;使得背景之后的元素根据自身内容产生漂亮的“变形”效果&#xff0c;示例&#xff1a; 代码实现 首先&#xff0c;创建一个 HTML 文件&#xff0c;写入如下…...

编程日记 2023/8/23 19:27:51

【技术】国标GB28181视频平台EasyGBS通过对应密钥上传到其他平台展示的详细步骤

国标GB28181协议视频平台EasyGBS是基于国标GB28181协议的视频云服务平台&#xff0c;支持多路设备同时接入&#xff0c;并对多平台、多终端分发出RTSP、RTMP、FLV、HLS、WebRTC等格式的视频流。平台可提供视频监控直播、云端录像、云存储、检索回放、智能告警、语音对讲、平台级…...

编程日记 2023/8/23 19:26:49

SpeedBI数据可视化工具：浏览器上做分析

SpeedBI数据分析云是一种在浏览器上进行数据可视化分析的工具&#xff0c;它能够将数据以可视化的形式呈现出来&#xff0c;并支持多种数据源和图表类型。 所有操作&#xff0c;均在浏览器上进行 在浏览器中打开SpeedBI数据分析云官网&#xff0c;点击【免费使用】进入&#…...

编程日记 2023/8/23 19:25:47

8.21笔记

Deeplab-MSc-LargrFOC 此图除了主输出之外&#xff0c;还有五个支线输出&#xff0c;他们池化层与VGG网络不同&#xff0c;其中卷积核大小是3&#xff0c;而VGG中卷积核大小为2&#xff08;这个网络一开始是基于VGG网络提出的&#xff0c;因为那时候提出比较早&#xff0c;没有…...

编程日记 2023/8/23 19:24:46

MyBatis-Plus中公共字段的统一处理

数据库中一些表的公共字段&#xff0c;例如修改时间、修改人、创建时间、创建人&#xff0c;我们一般都是这样来处理的&#xff1a; employee.setCreateTime(LocalDateTime.now()); employee.setUpdateTime(LocalDateTime.now()); employee.setCreateUser(UserHolder.get()); …...

编程日记 2023/8/23 19:23:45

SQL的导出与导入

1、导入 使用命令行导入 1.登录sql界面&#xff1b; 2.create database Demo新建一个库&#xff1b; 3.选中数据库use Demo&#xff1b;选中导入路径source D:Demo.sql; 4.查看表show tables; 2、导出 整个sql mysqldump -u username -ppassword dbname > dbname.sq…...

编程日记 2023/8/23 19:22:43

记录一次wordpress项目的发布过程

背景&#xff1a;发布一套已完成的代码到线上&#xff0c;有完整的代码包&#xff0c;sql文件&#xff0c;环境是linux 宝塔。无wordpress相关经验。 过程&#xff1a;正常的发布代码 问题1&#xff1a;访问自己的域名后跳转到别的域名。 解决&#xff1a; 修改数据表wp_optio…...

编程日记 2023/8/23 19:21:42

HTML详解连载（8）

HTML详解连载&#xff08;8&#xff09; 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽浮动-产品区域布局场景 解决方法清除浮动方法一&#xff1a;额外标签发方法二&#xff1a;单伪元素法方法三&#xff1a;双伪元素法方法四&#xff1a;overflow浮动-总结…...

编程日记 2023/8/23 19:20:39

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…...

编程日记 2023/8/23 19:19:37

主程技术分享: 游戏项目帧同步,状态同步如何选

网络游戏开发项目中帧同步,状态同步如何选&#xff1f; 网络游戏的核心技术之一就是玩家的网络同步,主流的网络同步有”帧同步”与”状态同步”。今天我们来分析一下这两种同步模式。同时教大家如何在自己的项目中采用最合适的同步方式。接下来从以下3个方面来阐述: 对啦&…...

编程日记 2023/8/23 19:18:35

ChatGPT-4: 半年的深度使用思考

几个月的时间一直在使用 ChatGpt-4&#xff0c;以口述语音转文字的形式说一下自己的体会。 1、选择版本 大前提&#xff1a;我使用的都是 GPT4 的版本。也就是说至少每个月要付费20$。 因为 3.5 的版本&#xff0c;实际上使用体验是非常差的&#xff0c;主要体现在答非所问上。…...

编程日记 2023/8/23 19:17:34

【健康医疗】Axure用药提醒小程序原型图，健康管理用药助手原型模板

作品概况 页面数量&#xff1a;共 20 页 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;健康管理&#xff0c;用药助手 作品申明&#xff1a;页面内容仅用于功能演示&#xff0c;无实际功能 作品特色 本作品为「用药提醒」小程序原型图…...

编程日记 2023/8/23 19:16:33

ERROR in static/js/xxx.js from UglifyJs

老项目用的webpack3&#xff0c;打包的时候遇到**ERROR in static/js/xxx.js from UglifyJs**这个报错&#xff0c; UglifyJS是个包含JS解释器、代码最小化、压缩、美化的工具集&#xff0c;是前端开发打包的最常用工具之一&#xff0c;只支持ES5&#xff0c;不支持ES6&#x…...

编程日记 2023/8/23 19:15:31

阿里云ECS服务器安装PostgreSQL

1. 概述 PostgreSQL是一个功能强大的开源数据库&#xff0c;它支持丰富的数据类型和自定义类型&#xff0c;其提供了丰富的接口&#xff0c;可以自行扩展其功能&#xff0c;支持使用流行的编程语言编写自定义函数 PostgreSQL数据库有如下优势&#xff1a; PostgreSQL数据库时…...

编程日记 2023/8/23 19:14:29

【核磁共振成像】傅里叶重建

目录 一、傅里叶重建二、填零三、移相四、数据窗函数五、矩形视野六、多线圈数据重建七、图像变形校正八、缩放比例九、基线校准 长TR&#xff0c;长TE&#xff0c;是T2加权像&#xff1b; 短TR&#xff0c;短TE&#xff0c;是T1加权像&#xff1b; 长TR&#xff0c;短TE&#…...

编程日记 2023/8/23 19:13:28

Camunda 工作流节点跳转 - 多实例节点判断和跳转

在多种工作流引擎中&#xff0c;Camunda框架对流程的处理控制更为强大、灵活。 在应对流程节点按业务需要进行自由跨节点跳转的需求时&#xff0c;通过代码自由控制节点的跳转在Camunda中是支持的&#xff0c;并且提供了编码方法&#xff0c;其中多实例的处理上有一些区别要特…...

编程日记 2023/8/23 19:12:27

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 …...

编程日记 2023/8/23 19:11:24

ol-cesium 暴露 Cesium viewer 对象以及二三维切换、viewer 添加点功能示例

ol-cesium 暴露 Cesium viewer 对象以及二三维切换、viewer 添加点功能示例 核心代码完整代码在线示例 二三维一体化的概念一直都比较火热&#xff0c;虽然大多数都是狭义的概念&#xff0c;但是很多需求方也想要这样的功能。 Openlayers 官方出了一个二三维一体化的工具&…...

编程日记 2023/8/23 19:10:23

国产化-达梦数据库安装2

目录 DM8数据库下载地址 安装一路狂飙next 启动服务 随着国家政府的推广、越来越多的政府项目、在系统部署需要采购国产服务器、数据库等 DM8数据库下载地址 https://eco.dameng.com/download/ 安装一路狂飙next windos安装比较简单直接next即可 仅仅记录几个关键疑问地方k…...

编程日记 2023/8/23 19:09:21

延长OLED透明屏的使用寿命：关键因素与有效方法分享

OLED透明屏作为一项创新的显示技术&#xff0c;具备透明度和高清晰度的特点&#xff0c;在各个领域得到了广泛应用。 然而&#xff0c;为了确保OLED透明屏的持久性和稳定性&#xff0c;延长其使用寿命是至关重要的。根据最新的研究和数据报告&#xff0c; 在这篇文章中&#…...

编程日记 2023/8/23 19:08:19

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/9/12 18:29:25

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/7/23 4:47:55

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/9/12 22:07:58

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/8/22 5:05:19

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/6/16 12:49:42

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/8/10 8:29:19

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2025/9/12 23:22:06

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/6/25 4:41:54

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/7/8 0:38:36

MySQL：分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...

编程新知 2025/9/2 16:53:57