使用 CSS 实现毛玻璃效果

在现代 Web 设计中,毛玻璃效果越来越受欢迎。它能够让界面元素看起来更加柔和、朦胧,同时又不会完全遮挡背景内容,给人一种透明而又不失质感的视觉体验。虽然过去实现这种效果需要借助图像编辑软件,但现在只需要几行 CSS 代码,就可以在网页上呈现出令人惊艳的毛玻璃效果。

在这里插入图片描述

使用 backdrop-filter 属性

实现毛玻璃效果最简单的方式就是使用 CSS 的 backdrop-filter 属性。这个属性可以对元素背后的区域应用各种滤镜效果,如模糊、饱和度调节等。下面是一个基本示例:

.blur-element {background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */backdrop-filter: blur(10px); /* 背景模糊 */-webkit-backdrop-filter: blur(10px); /* 兼容老版本 Safari */
}

在上面的代码中,我们首先为元素设置了一个半透明的背景色,然后使用 backdrop-filter 属性对背景进行了 10 像素的模糊效果。同时,我们还添加了 -webkit-backdrop-filter 来兼容老版本的 Safari 浏览器。

完整示例

下面是一个更完整的示例,展示了如何将毛玻璃效果应用于一个卡片组件:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Frosted Glass Effect</title><style>body {background-image: url('https://source.unsplash.com/random/1920x1080');background-size: cover;background-position: center;height: 100vh;margin: 0;display: flex;justify-content: center;align-items: center;}.card {background-color: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px) saturate(180%);-webkit-backdrop-filter: blur(10px) saturate(180%);border-radius: 10px;padding: 30px;max-width: 400px;text-align: center;box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);}.card h1 {color: #fff;text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}.card p {color: #ddd;}</style>
</head>
<body><div class="card"><h1>Frosted Glass Effect</h1><p>This is a card with a frosted glass effect using CSS backdrop-filter.</p></div>
</body>
</html>

在这个示例中,我们创建了一个具有背景图像的网页,并在中心位置放置了一个卡片元素。卡片元素使用了 backdrop-filter 属性来实现毛玻璃效果,同时还使用了 saturate(180%) 来增加背景颜色的饱和度,使效果更加明显。

为了增强视觉效果,我们还为卡片元素添加了一些其他样式,如半透明背景色、圆角、阴影等。同时,卡片内容的文本颜色也进行了调整,以确保在毛玻璃效果下依然清晰可读。

你可以将这个示例保存为一个 HTML 文件,并在浏览器中打开查看效果。当然,你也可以根据需要对 CSS 样式进行调整,以获得满意的毛玻璃效果。

浏览器兼容性

需要注意的是,backdrop-filter 属性目前在一些旧版浏览器中可能无法正常工作。根据 Can I Use 的数据,它在 Chrome 76+、Firefox 76+、Safari 9.1+ 和 Opera 62+ 中得到了良好支持,但在 Internet Explorer 和旧版本 Edge 中则无法使用。

如果你需要在不支持 backdrop-filter 的浏览器中实现类似效果,可以考虑使用其他技术,如 SVG 滤镜或者纯 JavaScript 方案。不过,随着时间的推移,backdrop-filter 的浏览器支持情况将会越来越好,届时就可以放心地在你的网页设计中使用这种漂亮的毛玻璃效果了。

总的来说,CSS 毛玻璃效果不仅视觉上吸引人,而且实现起来也相对简单。希望通过这篇文章,你能够掌握如何在自己的项目中应用这种时尚的设计元素。如果你有任何疑问或建议,欢迎在评论区留言讨论。

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

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

相关文章

愚人节礼物(C++)

这不愚人节 快到了吗&#xff1f;身为顶级程序员&#xff0c;不用c编写愚人节礼物那心里是很不舒服的&#xff0c;所以&#xff0c;趁着愚人节到来之际&#xff0c;下面分享一种坑朋友的c代码&#xff1a; 内容包含一些敏感词&#xff0c;如果对你产生了影响或伤害&#xff0c;…

IDEA 配置阿里规范检测

IDEA中安装插件 配置代码风格检查规范 使用代码风格检测 在代码类中&#xff0c;右键 然后会给出一些不符合规范的修改建议&#xff1a; 保存代码时自动格式化代码 安装插件&#xff1a; 配置插件&#xff1a;

SPSS k-均值聚类的 anova分析表解读

from&#xff1a;SPSS K均值聚类&#xff08;k-means&#xff09;和可视化方法 - CollinsLi - 博客园 (cnblogs.com) F值&#xff1a;变量对聚类的贡献 显著性水平&#xff1a;<0.05 则因子显著

MyBatis面试简答题

以下是一份MyBatis的高难度简答题,共20题: 请解释MyBatis中#{}和${}的区别,并举例说明它们在实际应用中的使用场景。 MyBatis的Mapper接口是如何与XML映射文件关联的? 如何在MyBatis中实现动态SQL?请列举几种常见的动态SQL元素并解释其作用。 描述MyBatis中的ResultMap的作…

[python] ETL 工作流程 Prefect

Prefect 是一个用于构建、调度和监控数据流程的 Python 库。它提供了一种简单而强大的方式来管理 ETL&#xff08;Extract, Transform, Load&#xff09;工作流程。下面是一个简单的示例&#xff0c;演示了如何使用 Prefect 来创建和运行一个简单的任务&#xff1a; 首先&…

深入理解JavaScript对象类型及其用法

在JavaScript中&#xff0c;对象是一种复合数据类型&#xff0c;用于存储多个值作为属性。这些属性可以是原始数据类型&#xff08;如字符串、数字等&#xff09;&#xff0c;也可以是其他对象。JavaScript对象的灵活性和强大功能使其成为编程中的关键概念。本文将深入探讨Java…

Pug 模板引擎:学习与使用

Pug 模板引擎&#xff1a;学习与使用 在前端开发中&#xff0c;模板引擎的使用可以极大地提高代码的可读性和可维护性。Pug&#xff08;也称为 Jade&#xff09;是一个流行的 Node.js 模板引擎&#xff0c;它使用简洁的语法来创建 HTML 结构。由于在vue3文档中看到了Pug的影子…

CMake笔记之PROJECT_SOURCE_DIR、CMAKE_SOURCE_DIR、CMAKE_CURRENT_BINARY_DIR对比

CMake笔记之PROJECT_SOURCE_DIR、CMAKE_SOURCE_DIR、CMAKE_CURRENT_BINARY_DIR对比 —— 杭州 2024-03-19 夜 code review! 文章目录 CMake笔记之PROJECT_SOURCE_DIR、CMAKE_SOURCE_DIR、CMAKE_CURRENT_BINARY_DIR对比1.三者区别2.具体示例说明3.CMAKE_SOURCE_DIR 和 PROJECT_S…

Sora没体验资格?开源项目:Open-Sora,复现类Sora视频生成方案

项目简介 Open-Sora项目是一项高效制作高质量视频的工作&#xff0c;明确所有权使用其模型、工具和内容的计划。通过采用开源原则&#xff0c;Open-Sora 不仅实现了先进的视频生成技术的普及&#xff0c;还提供了一个专业且用户界面的方案&#xff0c;简化了视频制作的复杂性。…

php 对接Pangle海外广告平台收益接口Reporting API

今天对接的是Pangle广告reporting api接口&#xff0c;拉取广告收益回来自己做统计。记录分享给大家 首先是文档地址,进入到Pangle后台就能看到文档地址以及参数&#xff1a; 文档地址&#xff1a;https://www.pangleglobal.com/zh/integration/reporting-api-v2 在这里插入图片…

算法---二分查找练习-2(寻找旋转排序数组中的最小值)

寻找旋转排序数组中的最小值 1. 题目解析2. 讲解算法原理3. 编写代码 1. 题目解析 题目地址&#xff1a;点这里 2. 讲解算法原理 首先&#xff0c;检查数组的最后一个元素是否大于第一个元素。如果是&#xff0c;说明数组没有进行旋转&#xff0c;直接返回第一个元素作为最小值…

稀碎从零算法笔记Day22-LeetCode:

题型&#xff1a;链表 链接&#xff1a;2. 两数相加 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;Leet 题目描述 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 …

vue项目:使用xlsx导出Excel数据

文章目录 一、安装xlsx二、报错及解决三、编写公共方法四、方法使用 一、安装xlsx 执行命令&#xff1a;npm i xlsx file-saver --save 二、报错及解决 使用时&#xff1a;import XLSX from "xlsx"; 发现如下报错信息 报错原因&#xff1a;xlsx版本不兼容。 解…

Java项目基于SpringBoot和Vue的时装购物系统的设计与实现

今天要和大家聊的是一款基于SpringBoot和Vue的时装购物系统。 &#x1f495;&#x1f495;作者&#xff1a;李同学 &#x1f495;&#x1f495;个人简介&#xff1a;混迹在java圈十年有余&#xff0c;擅长Java、微信小程序、Python、Android等&#xff0c;大家有这一块的问题可…

web前端之不一样的下拉菜单、不选中第一个元素的样式效果、伪类排除第一个元素、符号选择器、hover、not、first、child

MENU 效果图htmlcssJShtmlcss 效果图 htmlcssJS html <nav><ul><li class"navli"><h4>HTML5</h4><ul class"ulson"><li class"lison">HTML5</li></ul></li><li class"na…

java通过Excel批量上传数据

一、首先在前端写一个上传功能。 <template><!-- 文件上传 --><el-upload class"upload-demo" :on-change"onChange" :auto-upload"false"><el-button type"primary">上传Excel</el-button></el-up…

Django单表数据库操作

单表操作 测试脚本 当你只想测试django某一个py文件的内容,可以不用书写前后端的交互,直接写一个测试脚本即可 单表删除 数据库操作方法: 1.all():查询所有的数据 2.filter():带有过滤条件的查询 3.get():直接拿数据对象,不存在则报错 4.first():拿queryset里面的第一个元素…

Http 缓存之 Cache-Control 介绍

Cache-Control 是一个 HTTP 头&#xff0c;用于控制浏览器和其他中间缓存如何缓存和重新使用已缓存的响应。它可以在请求头或响应头中设置。 Cache-Control 的值是一组由逗号分隔的指令&#xff0c;常见的指令有&#xff1a; 1.public&#xff1a;响应可以被任何对象&#xf…

天童知识课堂|“春分”

春色正中分&#xff0c;人间恰良辰。春分&#xff0c;也称升分&#xff0c;是二十四节气之一。春分的到来&#xff0c;意味着春天已经过去一半了&#xff0c;气候也逐渐温暖&#xff0c;阳光更加明媚。而关于春分的知识&#xff0c;你知道多少呢&#xff1f;来和天童美语一起了…

鸿蒙开发实战:【系统服务管理部件】

简介 samgr组件是OpenHarmony的核心组件&#xff0c;提供OpenHarmony系统服务启动、注册、查询等功能。 系统架构 图 1 系统服务管理系统架构图 目录 /foundation/systemabilitymgr ├── samgr │ ├── bundle.json # 部件描述及编译文件 │ ├── frameworks …