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

什么是 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://www.kaotop.com/file/tupian/20220429/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>

使用场景玻璃拟态

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

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

如

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

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/langs/788409.html

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

发表评论

评论列表（0条）

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

发表评论

评论列表（0条）

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