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

织_网

已于 2022-05-06 17:20:37 修改

阅读量9.3k

点赞数 6

文章标签： css3 前端 css 毛玻璃

于 2022-04-25 10:57:38 首次发布

本文链接：https://blog.csdn.net/qq_43869822/article/details/124399622

版权

什么是 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

友情链接

拟态按钮
 拟态键盘

织_网

关注

6
点赞
踩
28

收藏

觉得还不错? 一键收藏
打赏
1
评论
毛玻璃 / 玻璃拟态处理 backdrop-filter 兼容性问题

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

扫一扫