学习
实践
活动
工具
TVP
写文章

你一定见过我,但是却不知道原来我叫“毛玻璃”

两行关键代码即可起飞 需要设置当前元素的背景透明度非 1,这里我们通过使用 background-color: rgba(255, 255, 255, 0.5); 来设置背景颜色,并设置了透明度为 0.5 使用 backdrop-filter 属性来设置当前元素后面内容的模糊度 支持 backdrop-filter 属性的浏览器实现毛玻璃效果 demo 我的兼容性问题 目前大部分的主流浏览器例如 Chrome、Edge、Safari 等都支持了这个属性 针对 Firefox,使用 filter 属性来实现毛玻璃效果 此 demo 演示了静态背景下在不支持 backdrop-filter 属性浏览器中如何实现毛玻璃效果 不支持 backdrop-filter

23200

妙用 CSS 构建花式透视背景效果

主要就是颗粒化的背景 background加上backdrop-filter: blur() 即可。 首先,我们需要实现颗粒背景。 255, 255, 1) 2px); background-size: 4px 4px; } 这样,我们就成功的将背景颗粒化: 当然,此时透出的背景看上去非常生硬,也不美观,所以,我们还需要 backdrop-filter background: radial-gradient(transparent, rgba(255, 255, 255, 1) 2px); background-size: 4px 4px; backdrop-filter : blur(10px); } 这样,我们就实现了一开始所展示的效果: 这里需要注意的是,background-size 的大小控制,和不同的 backdrop-filter: blur(10px) { background: linear-gradient(45deg, transparent, #fff 4px); background-size: 6px 6px; backdrop-filter

10820
  • 广告
    关闭

    2022腾讯全球数字生态大会

    11月30-12月1日,邀您一起“数实创新,产业共进”!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS 奇思妙想 | 全兼容的毛玻璃效果

    通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的操作 ,巧妙的同样实现毛玻璃效果,让这个效果真正能运用在业务当中 什么是 backdrop-filter backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移) backdrop-filter 与 filter 对比 我们使用 backdrop-filter 与 filter 同时实现一个毛玻璃效果作为对比,伪代码如下:

    毛玻璃 CSS 特效的兼容性方案探究

    一、backdrop-filter 是金手指吗? 毛玻璃效果在 iOS 系统上比较常见,比如消息通知栏、手机助手卡片等地方,所以咱打开苹果官网看看! 去查了查兼容性:backdrop-filter -- caiuse[1] emmm~,再考虑到我司自己魔改的 Webview 内核情况。。。 另一个设置模糊度的 CSS 属性就是 filter,那么我们的另一个思路就是通过 filter 来模拟 backdrop-filter 属性的效果。 且 filter 的兼容性会更好:filter -- caiuse[3] 我们看看 filter 和 backdrop-filter 效果的差异: /* filter 的写法,将 backdrop-filter 另外 backdrop-filter 属性是有性能问题的,咱就是说,都 2022 年了,求求大家升级一下手上的设备吧!

    19010

    妙用滤镜构建高级感拉满的磨砂玻璃渐变背景

    它就是: 多块不规则渐变背景 + 高斯模糊蒙版 在 CSS 中,也就是借助 background + backdrop-filter: blur() 即可实现。 实现高斯模糊蒙版 接下来,这一步最为关键,就是使用 backdrop-filter 实现高斯模糊蒙版。 叠在上述几个元素上方即可,最关键的一行代码 backdrop-filter: blur(150px) .g-bg::before { content: ""; position : fixed; top: 0; left: 0; bottom: 0; right: 0; backdrop-filter: blur(150px); : blur(),而不是 filter: blur(),如果你对这两个滤镜是使用选择还有所疑惑,可以看看的我的这篇文章讲解 -- 深入探讨 filter 与 backdrop-filter 的异同 借助

    35830

    CSS mask 实现鼠标跟随镂空效果

    backdrop-filter链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter 使用方式和 filter完全一致! backdrop-filter: blur(10px); 下面是 MDN 中的一个示意效果: backdrop-filter是让当前元素所在区域后面的内容模糊,要想看到效果,需要元素本身半透明或者完全透明 有兴趣的可以查看这篇文章:CSS backdrop-filter简介与苹果iOS毛玻璃效果 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com) 文章链接:https://www.zhangxinxu.com 阴影实现 在上面第一个例子中添加 backdrop-filter .wrap::before{ content:''; position: absolute; width: 100px; 渐变实现 现在在第二个例子中添加 backdrop-filter .wrap::before{ content: ''; position: absolute; width:

    41420

    使用纯 CSS 实现超酷炫的粘性气泡效果

    就这么简单,父容器添加白色底色以及对比度滤镜 filter: contrast(8),子容器添加 filter: blur(5px) 即可,这样,我们就能得气泡的融合效果,基本得到我们想要的效果: 利用 backdrop-filter 也好办,在这里,我们尝试利用 backdrop-filter 去替换 filter。 两者之间的差异在于,filter 是作用于元素本身,而 backdrop-filter 是作用于元素背后的区域所覆盖的所有元素,如果你想了解更多关于 backdrop-filter 的信息,可以戳我的这篇文章 :深入探讨 filter 与 backdrop-filter 的异同。 : blur(5px); } } 我们通过去到原来添加在 .g-footer 上的 filter: blur(5px),通过他的伪元素,叠加一层新的元素在它本身之上,并且添加了替代的 backdrop-filter

    9030

    如何在网页置灰的时候,部分元素保持彩色-有意思的面试题

    , 我本人图像处理方面比较菜,但是看起来全灰的算法不可逆,而且如果在元素上再盖一个canvas也不太好弄 放弃R/G/B = 0.2126R' + 0.7152G' + 0.0722'B遮挡解决方案 backdrop-filter 有一个解决方案是用backdrop-filter做一个遮罩,毕竟filter还是有点损耗首屏性能的,虽然可以用transform开启硬件优化一些,我们还可以用遮罩的方式挡住也可以的,并且设置pointer-events position: relative; width: 100%; height: 100%;}html::before { content: ""; position: fixed; backdrop-filter inset: 0; z-index: 100;}还可以把遮罩的position换成absolute, 实现一个只置灰首屏的效果,不过我感觉没啥必要图片然后我们可以设置指定元素的z-index,超过backdrop-filter 的100就可以, 就有首屏+部分彩色的效果图片.not-gray{ position: relative; z-index:1000;}元素遍历标记backdrop-filter其实也有他的兼容性问题

    1700

    冷门又好用的 CSS 特性

    比如,每年的国家公祭日很多网站会把颜色调整成黑白,就可以用 filter 一行代码搞定: 8. backdrop-filter 属性 与 filter 类似的属性,backdrop-filter 属性将图形效果 MDN - backdrop-filter Can I Use - CSS Backdrop Filter 比如,可以用它做一个毛玻璃的效果: Codepen demo 关键代码: <div class /images/roses.jpg) no-repeat; } p { background-color: rgba(255, 255, 255, 0.3); backdrop-filter:

    10410

    纯CSS 毛玻璃效果 💎

    要实现模糊,我使用的是 backdrop-filter: blur(); 。 flex; justify-content: center; align-items: center; font-size: 60px; letter-spacing: 0.5em; backdrop-filter 0, 0, .3); } </style>

    复制代码 上面的代码中,backdrop-filter

    49830

    CSS filter 有哪些神奇用途

    <filter-function>]* | none filter: url(file.svg#filter-element-id) <filter-function> 可以用于 filter 和 backdrop-filter 在 《CSS揭秘》 等著作中也有系统讲解,下面是我对分别使用 filter: blur 和 backdrop-filter: blur两种方法实现这种效果的总结。 top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: inherit; filter: blur(10px); } backdrop-filter .glass-by-backdrop-filter { backdrop-filter: blur(10px); } 实现效果如下图所示(左:filter、右:backdrop-filter):

    20920

    【CSS】1095- CSS filter 有哪些神奇用途

    <filter-function>]* | none filter: url(file.svg#filter-element-id) <filter-function> 可以用于 filter 和 backdrop-filter 在 《CSS揭秘》 等著作中也有系统讲解,下面是我对分别使用 filter: blur 和 backdrop-filter: blur两种方法实现这种效果的总结。 top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: inherit; filter: blur(10px); } backdrop-filter .glass-by-backdrop-filter { backdrop-filter: blur(10px); } 实现效果如下图所示(左:filter、右:backdrop-filter):

    18830

    博客主题重构记录

    整体设计 整体颜色设计基本不变,为了优化整体的样式统一性,主要改动点如下: 移除副色调 hover 样式,使用下划线高亮 hover 可点击元素 调整全局背景色 调整卡片背景色为半透明,配合 CSS backdrop-filter 移除侧边栏的 Firefox 和 Mozilla 广告 移除由 Vue.js 构建的自定义搜索,转为 Google 搜索直接跳转 粘性元素调整 Navbar 和 Footer 粘性 navbar 配合 CSS backdrop-filter

    8640

    你不知道的 CSS - by Chrome 2019

    Focus-within Prefers-reduced-motion Scroll Snap Scroll Snap Horizontal Scroll Snap Vertical Scroll Snap Matrix Backdrop-filter Backdrop-filter 这个特性还处于实验阶段。 正如属性名称描述的那样, 这个特性, 会给某个元素的后面应用图形效果, 比如模糊, 或者颜色转换。 main> // css h1 { position: absolute; top: 0; left: 0; border: 2px dashed; padding: 1em; backdrop-filter

    25240

    7b2美化-顶部菜单透明

    顶部菜单透明 ---- 代码添加到css样式 /*全站顶部透明 */ .top-style-blur { background: rgba(255, 255, 255, 0.56); backdrop-filter

    7230

    NEZHA监控面板美化

    important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } important; backdrop-filter: blur(10px) ! important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);

    22310

    ❤️使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)❤️

    其次,我们需要使用backdrop-filter: blur (10px)来模糊背景。最后需要使用边框来增强其美感。 为此使用backdrop-filter: blur (10px)。 absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; border-radius: 10px; backdrop-filter

    30020

    html+css实现漂亮透明的登录页面,HTML实现炫酷登录页面

    * 背景圆样式 */ .box .circle { position: absolute; background: rgba(255, 255, 255, 0.1); /* backdrop-filter 属性为一个元素后面区域添加模糊效果 */ backdrop-filter: blur(5px); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1); rgba(255, 255, 255, 0.1); display: flex; justify-content: center; align-items: center; backdrop-filter

    4.6K40

    在 css 图层分析这方面,Chrome Devtools 属实不太行

    原因就是 will-change: will-change 只有 opacity、transform、transform-style、perspective、filter、backdrop-filter 转换 position:fixed 与其他元素可能重叠 will-change 样式的值为 opacity、transform、transform-style、perspective、filter、backdrop-filter

    10620

    iOS 9对前端做了什么?

    backdrop-filter iOS9 中的Safari支持背景模糊这个CSS属性 CSS代码 ? 效果如下: ?

    46450

    扫码关注腾讯云开发者

    领取腾讯云代金券