css实现磨砂效果(filter 与 backdrop-filter 的对比分析)

在 CSS 中实现磨砂效果(类似于 iOS 的磨砂玻璃效果)通常结合使用 backdrop-filter 属性和半透明的背景色。

html 复制代码
<div class="content">
  <img src="src\assets\404_images\xxmLogo.png" alt="">
  <div class="frosted-glass">
    <p>This is a frosted glass effect.</p>
  </div>
</div>
css 复制代码
.content {
  position: relative;
  width: 200px;
  height: 200px;
}

.frosted-glass {
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.3);
  /* 半透明背景色 */
  backdrop-filter: blur(20px);
  /* 背景模糊效果 */
  -webkit-backdrop-filter: blur(10px);
  /* Safari 中的背景模糊效果 */
  text-align: center;
  left: 0;
  bottom: 0;
  position: absolute;
}
  • background-color: rgba(255, 255, 255, 0.3);:使用半透明的白色背景,让背景内容依然可见,同时为磨砂效果打基础。
  • backdrop-filter: blur(10px); 和 -webkit-backdrop-filter: blur(10px);:这是磨砂效果的核心。backdrop-filter对元素后面的背景应用模糊效果。-webkit-backdrop-filter 是为了兼容 Safari 浏览器。

效果图:

添加backdrop-filter:

未加backdrop-filter:

拓展

给img加上 filter:blur(5px); 会产生如下效果:

  • filter: 是一个CSS属性,用于为元素的图像本身(或任何其他可以应用滤镜的元素)应用视觉效果,比如模糊、锐化、颜色变化等。它直接影响到应用了该属性的元素本身。
  • backdrop-filter: 同样是一个CSS属性,但它的作用是为元素背后的区域(即元素的背板)应用滤镜效果。这意味着它可以为任何位于该元素下面的元素添加视觉效果,而不会改变元素本身的样式。

CSS 属性 filter 与 backdrop-filter 的对比分析

相关推荐
CodeCraft Studio34 分钟前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
零点零一35 分钟前
VS+QT的编程开发工作:关于QT VS tools的使用 qt的官方帮助
开发语言·qt
2501_915918412 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂2 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技2 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip2 小时前
JavaScript二叉树相关概念
前端
rannn_1113 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
lingchen19063 小时前
MATLAB的数值计算(三)曲线拟合与插值
开发语言·matlab
gb42152873 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
一朵梨花压海棠go3 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript