前端毛玻璃效果

圆周率呀

已于 2022-08-26 15:38:24 修改

阅读量2.3k

点赞数 6

分类专栏： html5/css3 文章标签：前端 css

于 2022-07-20 16:12:42 首次发布

本文链接：https://blog.csdn.net/qq_43532275/article/details/125894279

版权

html5/css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用场景

1、复杂的背景上添加文字，文字能清晰展示，并尽可能的保留原背景的话

2、在一些对话框或填写表单交互场景中，需要提高用户对目标对象的注意力

传统的处理方法是在需要的对象底部加一个div,填充颜色设计透明度，往往效果不理想，毛玻璃特效主要使用 高斯模糊 和 羽化，视觉效果更美观。

对比图(右边是毛玻璃效果图，左边是设置透明度效果图)

代码：

<style>
    .box {
        width: 700px;
        height: 700px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.nbflzd.com%2Fwp-content%2Fuploads%2F2018%2F03%2F569.jpg&refer=http%3A%2F%2Fwww.nbflzd.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660896442&t=186cd406d82bd815f0fa898f2ce94ce1')no-repeat top;
        background-size: 100%;
        background-position: center;
    }

    .backdrop {
        width: 80%;
        height: 40%;
        border-radius: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 60px;
        letter-spacing: 0.5em;
        backdrop-filter: blur(20px);
        color: #fff;
        box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3);
    }
    .compare{
        width: 80%;
        height: 40%;
        border-radius: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 60px;
        letter-spacing: 0.5em;
        background-color:rgba(255, 255, 255, 0.7);
    }
</style>

<div class="box">
    <div class="backdrop">毛玻璃</div>
    <div class="compare">对比</div>
</div>