CSS blur() 函数 - 绿叶网

CSS blur() 语法

在 CSS 中，blur() 函数一般作为 filter 属性的值，来为元素添加模糊效果。

语法：

filter: blur(radius);

说明：

radius 是模糊半径，表示模糊的程度。它通常使用长度单位（如 px、rem）。值越大，模糊效果越强；值为 0 时，则不会有任何模糊效果。

对于 blur() 函数，小伙伴们需要清楚以下几点。

blur() 只能接受非负值，使用负数是无效的。
blur() 可以和其他滤镜函数（如 opacity()、contrast()、grayscale() 等）一起使用。滤镜会按顺序依次应用，不同的顺序会导致最终效果不同。

注意: 元素过度模糊或对大量元素应用模糊，可能会导致页面变慢。尤其是在动态切换中，我们在使用时要谨慎。

CSS blur() 摘要

属于	CSS 滤镜
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

CSS blur() 示例

接下来，我们通过几个简单的例子来讲解一下 CSS blur() 函数是如何使用的。

示例 1：blur() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            filter: blur(5px);
        }
    </style>
</head>
<body>
    <img src="imgs/bird.jpg" alt="">
</body>
</html>

页面效果如下图所示。

blur() 基本用法

分析：

在这个例子中，我们使用 filter: blur(5px) 来为图片添加了一个半径为 5px 的模糊效果。

示例 2：blur() 实现动态模糊效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-image: url("imgs/bird.jpg");
            background-size: cover;
            filter: blur(0);
            transition: filter 0.3s;
        }
        div:hover {
            filter: blur(8px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上时，页面效果如下图 2 所示。

blur() 实现动态模糊效果 1

blur() 实现动态模糊效果 2

分析：

在这个例子中，我们首先使用 filter: blur(0); 来给 div 元素设置了一个初始无模糊状态的效果。然后在 hover 状态中使用 filter: blur(8px);，并且结合 transition 属性实现了平滑的过渡效果。

示例 3：blur 结合其他滤镜函数

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        img {
            filter: blur(3px) brightness(0.8) contrast(1.2);
        }
    </style>
</head>
<body>
    <img src="imgs/bird.jpg" alt="">
</body>
</html>

页面效果如下图所示。

blur 结合其他滤镜函数

分析：

filter: blur(3px) brightness(0.8) contrast(1.2);

上面这句代码表示同时使用模糊、降低亮度、增强对比度这 3 种效果。多个滤镜会按顺序执行，从而创造复杂的视觉效果。

示例 4：blur() 实现背景虚化效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .container {
            position: relative;
            width: 200px;
            height: 200px;
        }
        .background {
            width: 100%;
            height: 100%;
            background-image: url("imgs/bird.jpg");
            background-size: cover;
            filter: blur(10px);
        }
        .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 24px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="background"></div>
        <div class="text">绿叶网</div>
    </div>
</body>
</html>

页面效果如下图所示。

blur() 实现背景虚化效果

分析：

在实际项目开发中，背景虚化是一种很常见的效果，它静态用于模态框或卡片设计。

在这个例子中，首先我们为 .background 元素应用了 blur(10px)，这样可以使得它的背景图片显示为模糊效果。然后文本保持清晰，并使其位于容器中心，这样两者就形成了对比鲜明的视觉效果。