毛玻璃 / 玻璃拟态处理 backdrop-filter 兼容性问题

什么是 backdrop-filter

backdrop-filter CSS3 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
backdrop-filter 与 filter 非常类似，可以取的值都是一样的，但是一个是作用于整个元素，一个是只作用于元素后面的区域。

兼容性对比

backdrop-filter

filter

使用例子

使用 background-attachment: fixed 将叠加在元素下面的图片定位到与背景相同的坐标，再使用 filter: blur() 对其进行模糊处理。目前所以的浏览器，除了IE，其他浏览器上均能实现。

<!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>毛玻璃</title>
</head><body><body><main><div>使用 background-attachment: fixed 将叠加在元素下面的图片定位到与背景相同的坐标，再使用 filter: blur() 对其进行模糊处理。</div></main></body>
</body>
<style>body {min-height: 100vh;box-sizing: border-box;margin: 0;padding-top: calc(50vh - 6em);font: 150%/1.6 Baskerville, Palatina, serif;}/* 给body与main伪元素设置背景，background-attachment的值设置为fixed。这个很重要。不管元素父级是谁，一旦设置为fixed，其背景是相对于整个窗口的视角来定位，与绝对定位的fixed相同。这样方便模糊后的图片与原图完美匹配。 */body,main::before {background: url(http://p2.qhimg.com/bdr/__85/t01781bd4b1218329e1.jpg);background-repeat: no-repeat;background-attachment: fixed;background-size: cover;}main {position: relative;margin: 0 auto;padding: 1em;max-width: 23em;background: hsla(0, 0%, 100%, .25) border-box;overflow: hidden;border-radius: .3em;box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset,0 .5em 1em rgba(0, 0, 0, 0.6);text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);user-select: none;margin-bottom: 60vh;}main::before {content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: -30px;z-index: -1;-webkit-filter: blur(20px);filter: blur(20px);}
</style></html>

玻璃拟态生成器

http://santhoshsivan.com/glass.html

使用场景

玻璃拟态

玻璃形态已经成为界面设计的新趋势。这种设计风格的特点是半透明的磨砂玻璃效果，因此得名Glassmorphism，它增加了用户界面的深度和视觉层次，可以有效地利用它来突出你想要突出的内容。在本文中，我们将展示一些鼓舞人心的Glassmorphism UI设计示例和概念，以便您在自己的设计中采用这种风格。

从网站登陆页面、仪表板、移动应用程序界面到卡片、登录屏幕和应用程序登录屏幕等UI组件，设计师以创造性的方式使用Glassmorphic效果来增加界面的视觉趣味性。在浏览这个橱窗时，你会注意到玻璃形态元素的效果很好，当层层叠放在彩色形状、充满活力的背景和图像上时，通过半透明的玻璃元素显示并强调效果。

如

RH机构的玻璃形态头部概念
Giuseppe Fasino的Glassmorphic UI Elements
注册/登录UI设计Stefan Brown

友情链接

拟态按钮
拟态键盘

毛玻璃 / 玻璃拟态处理 backdrop-filter 兼容性问题相关推荐

【乐逍遥网站设计】玻璃拟态: 为网站设计带来维度效果
网页设计师想出了一些非常聪明的技巧,让他们的作品有一种实体感.玻璃拟态(Glassmorphism)就是这样一种技术. 当您将模糊效果与透明度相结合时,像素会呈现出磨砂玻璃的略微不透明的品质--为设计 ...
Backdrop Filter
CSS 滤镜 : backdrop-filter backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果. 滤镜: 名称: 方法案例: 效果: blur() 模糊 : blu ...
微信小程序 php毛玻璃,微信小程序 CSS filter（滤镜）的使用示例详解
之前在看七月老师的视频的时候,看到了有一个样式是 -webkit-filter ,不知道是什么(我没咋学过CSS,嘿嘿,所以不知道是啥),于是查了一下,原来是滤镜吖.但是在微信小程序里使用的时候,下面 ...
html的filter兼容性,网站黑白效果网站变灰色（兼容IE和主流浏览器）JS+CSS网站整站变黑白效果-css的 filter属性（Chrome内核）...
最新文章 https: open weixin qq com 有这个的账号,给客户开通微信小程序不需要认证费直... https: open weixin qq com 有这个的账号,给客户开通微信小 ...
CSS 轻松实现‘毛玻璃’效果
毛玻璃 1. backdrop-filt 属性 2. filter 属性 3. backdrop-filter && filter 4. 参考资料 1. backdrop-filt 属 ...
Css3实现背景毛玻璃效果
毛玻璃效果 ios里毛玻璃效果的使用非常多,本文介绍一个实现div毛玻璃背景的方法 css3 Filter css3的Filter主要用在图像的特效处理上,默认值为none,还有以下备选项: 1.gr ...
动态毛玻璃特效html,实现div毛玻璃背景
毛玻璃效果 ios里毛玻璃效果的使用非常多,本文介绍一个实现div毛玻璃背景的方法 CSS3 Filter CSS3的Filter主要用在图像的特效处理上,默认值为none,还有以下备选项: 1.gr ...
css实现毛玻璃效果
首先我们要知道实现毛玻璃效果的关键点:filter滤镜 html代码 <div class="main"></div> 先写一个居中的div,并给body加 ...
css实现拟态按钮
拟态按钮 dome <!DOCTYPE html> <html lang="zh"><head><meta charset="U ...
Css玻璃拟物化风格生成器
字面上由玻璃(glass)和拟物化(skeumorphism)组成,叫法颇多:玻璃拟态.玻璃拟物化设计.玻璃拟物风格,其实意思都对,它比新拟物风格更直观清晰. 玻璃拟物风格特征显著,用户也能快速确定界 ...

毛玻璃 / 玻璃拟态 处理 backdrop-filter 兼容性问题

什么是 backdrop-filter

兼容性对比

使用例子

玻璃拟态生成器

使用场景

玻璃拟态

友情链接

毛玻璃 / 玻璃拟态 处理 backdrop-filter 兼容性问题相关推荐

最新文章

热门文章

毛玻璃 / 玻璃拟态处理 backdrop-filter 兼容性问题

毛玻璃 / 玻璃拟态处理 backdrop-filter 兼容性问题相关推荐