css实现模糊

!小白

已于 2022-02-27 19:39:32 修改

阅读量6.7k

点赞数 2

文章标签： css css3 前端

于 2022-02-27 19:17:16 首次发布

本文链接：https://blog.csdn.net/jxd15912157813/article/details/123168447

版权

本文介绍了CSS中实现模糊效果的两种方法：filter和backdrop-filter。filter通过设置元素自身模糊，而backdrop-filter则应用于元素背后的元素。示例代码展示了如何创建带有模糊边界的盒子，并解释了如何调整尺寸以隐藏白边。同时提到了backdrop-filter需要透明背景才能看到效果。详细内容可参考MDN文档。

摘要由CSDN通过智能技术生成

一、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);
}
</style>

二、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>

详细可看

filter - CSS（层叠样式表） | MDN

backdrop-filter - CSS（层叠样式表） | MDN