使用CSS的backdrop-filter属性来实现半透明磨砂效果

最新推荐文章于 2025-01-05 08:06:42 发布
原创 最新推荐文章于 2025-01-05 08:06:42 发布 · 776 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #html

本文介绍了如何利用CSS的backdrop-filter属性，结合blur和brightness滤镜，实现不依赖图片的半透明磨砂视觉效果。示例代码展示了将背景颜色设置为半透明白色，并应用5px的模糊和80%的亮度调整。

使用CSS的backdrop-filter属性来实现半透明磨砂效果，不用图片。

以下是示例代码：

background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(5px) brightness(0.8);

司戊
关注
利用backdrop-filter实现毛玻璃效果UI组件
weixin_41455464的博客
06-28 260
是一个非常强大的 CSS 属性，它可以让你轻松实现毛玻璃效果，并创造出各种各样的视觉效果。只要你掌握了它的用法，并注意兼容性和性能问题，就可以让你的 UI 焕发新生，提升用户体验。所以，还在等什么？赶紧拿起你的代码，尝试一下吧！相信你会爱上它的！好了，今天的分享就到这里。希望这篇文章能够帮助你更好地理解和使用。如果你有什么问题或建议，欢迎在评论区留言。咱们下期再见！
backdrop-filter 高级用法：毛玻璃与液态模糊效果，让你的网页不再平庸
最新发布
weixin_41455464的博客
07-01 596
如果你也厌倦了网页上那些平淡无奇的背景，想给你的用户带来一些视觉上的惊喜，那这篇文章绝对值得你花几分钟看看。是一个非常强大的 CSS 属性，它可以让你轻松实现各种酷炫的视觉效果，让你的网页不再平庸。，一个作用于自身，一个作用于背景，一个像自拍美颜，一个像给照片背景加滤镜，分工明确，各有千秋。各位看官，今天咱们聊点儿前端里的小魔法，一个能让你的网页瞬间变得高级又迷人的CSS属性——它能模糊、调整颜色，甚至扭曲你元素背后的图像，创造出各种各样酷炫的效果。记住，前端的世界，没有最酷，只有更酷！
使用css制作出磨砂透明效果
王铁柱666的博客
01-05 601
属性在一些较旧的浏览器中可能不受支持。在使用时，请确保你的目标浏览器支持该属性，或者考虑使用回退方案。另外，如果你想要在整个页面上应用这种效果，而不是仅仅在一个元素上，你可以相应地调整CSS选择器。在前端开发中，要创建磨砂透明效果（通常称为毛玻璃效果或模糊效果），你可以使用CSS的。设置了半透明的白色背景，以增强磨砂效果。/* 设置背景颜色及透明度 */是实现磨砂效果的关键，你可以调整。/* 使用你的图片URL *//* 设置磨砂效果的程度 */函数中的值来控制模糊的程度。/* 可选：添加圆角 */
DIV+JS实现半透明效果
我的世界我的梦
12-19 3938
function showSearchResource()...{  var iframe=document.getElementById("transbox");  iframe.style.display="";  iframe.style.height=document.body.clientHeight;  window.showModalDialog(searchResource1
CSS实现磨砂玻璃（毛玻璃）效果样式
风清扬的专栏
05-21 4425
伪元素的内容为空，位置为绝对定位，宽度和高度分别为 100%，并设置了一个半透明的白色背景色。通过这种方式，可以使用 CSS 快速简单地实现磨砂玻璃背景效果。函数设置模糊程度为 10 像素。可以根据需要调整这个值来控制模糊程度。属性并不是所有浏览器都支持，需要进行兼容性测试和兼容性处理。伪元素的不透明度降低到 0.8，以增强磨砂玻璃效果。要实现磨砂玻璃背景，可以使用 CSS3 中的。在这个示例中，设置了。
CSS磨砂玻璃穿透效果 filter: blur(4px)；backdrop-filter: blur(4px)；
黄彪博客
07-05 1620
工作中，UCD 设计了一个“磨砂穿透”的效果，本想着画一个磨砂效果，然后在通过透明度穿透，实现“磨砂穿透”的效果，然而，看到。这篇文章，发现可以将这种效果做成一个通用的组件。
CSS 实现磨砂玻璃样式
前端开发
05-18 852
CSS 实现磨砂玻璃样式
CSS 实现毛玻璃效果 | backdrop-filter与filter的区别
zzylj的博客
03-22 815
CSS 实现毛玻璃效果 | backdrop-filter与filter的区别
CSS backdrop-filter属性详解与实战示例
首先，从基本语法来看，`backdrop-filter`的使用方式类似于CSS中的`filter`属性，但作用对象不同：`filter`作用于元素自身的内容及其子元素，而`backdrop-filter`则作用于当前元素所覆盖区域下方的“背景内容”，即...
CSS backdrop-filter实现毛玻璃效果详解
CSS `backdrop-filter` 属性是现代网页设计中实现高级视觉效果的重要工具之一，尤其在打造现代化、富有层次感的用户界面方面具有不可替代的作用。本文围绕“CSS backdrop-filter详解[项目源码]”这一主题，深入剖析...
css实现磨砂效果（filter 与 backdrop-filter 的对比分析）
Zing_ing的博客
08-10 2020
在 CSS 中实现磨砂效果（类似于 iOS 的磨砂玻璃效果）通常结合使用 backdrop-filter 属性和半透明的背景色。</</</
css backdrop-filter属性 用来做图片的部分模糊效果
weixin_46544600的博客
01-11 809
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。mdn介绍 示例： 代码： <div class="img-box"> <div class="bottom"> backdrop-filter: blur(5px); </div> </div> .img-box { positi
自己常用的透明颜色
zh刺客
10-26 2295
可以用到简单的xml的背景框 #f2ffffff #e6ffffff #d9ffffff #ccffffff #bfffffff #b3ffffff #a6ffffff #99ffffff #8cffffff #80ffffff #73ffffff #66ffffff #59ffffff
【积水成渊】CSS磨砂玻璃效果和渐变主题色文字
小淼淼的博客
08-04 1625
【积水成渊】CSS磨砂玻璃效果和渐变主题色文字
Android半透明+RGB颜色代码大全
热门推荐
Memories_Code的博客
05-31 4万+
半透明值: 不透明 100% FF   95% F2   90% E6   85% D9   80% CC   75% BF   70% B3   65% A6   60% 99   55% 8C 半透明 50% 80   4
CSS半透明磨砂效果实现
锦恢的博客
03-07 1万+
CSS实现一个带颜色的磨砂效果
rgba半透明背景兼容ie8，filter滤镜半透明写法
前端小狮的博客
04-04 610
在一个页面中设置一个半透明的白色div。这个常规写法用rgba，只需要给这个div设置如下的属性即可： background: rgba(255,255,255,.1); 但是要兼容到ie8。这个就有点蛋疼了。因为ie8不支持rgba()函数。下面我们总结一下rgba()函数的含义。 rgba的含义，r代表red，g代表green，b代表blue，红绿蓝是三原色。 所有颜色都可以由这三...
CSS filter-仿磨砂玻璃效果
Transicion tried to swim in lava
10-25 385
文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 其实就是插入两个图片而已:l 一、pandas是什么？ 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('ign
filter的alpha透明度和opacity透明度区别
ssisse的博客
08-31 5752
filter的alpha透明度与opacity透明度  相同点：都是值为0表示完全透明，值为1表示完全不透明 不同点：alpha可以应用于元素特定的属性（比如背景、边框、文字），且alpha只作用于这个属性。 而opacity会作用于某元素及该元素下的所有属性。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值