css实现模糊

最新推荐文章于 2023-09-22 15:15:55 发布

文仟传输助手

最新推荐文章于 2023-09-22 15:15:55 发布

阅读量1.9k

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_45072479/article/details/129812116

版权

一、filter
这种方式有白边，需要把盒子设置大一点，把白边隐藏。

<div class="bg-box">
    <div class="bg"></div>
<div>
<style>
.bg-box{
    width:100%;
    heigth:100%;
    position:relative;
    overflow:hidden;
}
.bg{
    position:absolute;
    top: -2.5%;
    left: -2.5%;
    z-index: -2;
    height: 105%;
    width: 105%;
    filter: blur(5px);
}

二、backdrop-filter
适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

在需要模糊的盒子上添加一层遮罩的盒子

<div class="box">
    需要模糊的内容
<div>
<div class="filter"></div>
<style>
.filter{
    position:absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(2px);
}
</style>