前端背景图片模糊较好的办法

小高web

已于 2022-12-01 19:31:28 修改

阅读量1k

点赞数

文章标签：前端 css html javascript css3

于 2022-12-01 19:28:00 首次发布

本文链接：https://blog.csdn.net/gaoshan1999/article/details/128137069

版权

效果：解决了filter模糊和添加伪元素会模糊文字以及糊边的痛点

代码都贴过来了，但关键代码只有一行：backdrop-filter: blur(5px)

其思想就是在背景图片的盒子下一级放一个同样大小的盒子，相当于遮罩层

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .demo {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .photo_object {
        width: 80%;
        height: 80%;
        background: url(https://img1.baidu.com/it/u=3388724121,114678878&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281) center / cover no-repeat;
    }
    
    .vague {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 关键代码 */
        backdrop-filter: blur(5px);
    }
    
    span {
        color: white;
        font-size: 50px;
    }
</style>

<body>
    <div class='demo'>
        <div class='photo_object'>
            <div class='vague'>
                <span>这是文字</span>
            </div>
        </div>
    </div>
</body>

效果如下：