CSS实现图片高斯模糊效果

最新推荐文章于 2025-10-18 12:01:39 发布

原创最新推荐文章于 2025-10-18 12:01:39 发布 · 5.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用CSS实现图片模糊但保持边界清晰的方法。通过在外层添加一个盒子，并设置图片居中、放大和模糊滤镜，使模糊边缘刚好位于可见区域之外。

在CSS中，我们可以使用滤镜(filter)为图片添加模糊特效。但是这种处理会造成图片边界也变得模糊，比如下图这种情况：

示例图片来源：Unsplash

Photo by Josh Hild on Unsplash

原图：

直接使用filter模糊：

有些时候，我们可能需要图片模糊但是边界清楚的效果，这时候可以考虑一种思路：在图片外面加一个框防止显示内容溢出，在框内将图片居中，模糊并适当放大，让模糊的白边刚好在显示范围外面，下面是实现方法：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS高斯模糊</title>
    <style>
        /* 初始化 */
        html,body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        /* 图片外框 */
        .box {
            position: relative;
            width: 800px;
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center; /* 使用flex将图片水平垂直居中 */
            overflow: hidden; /* 溢出部分隐藏 */
        }
        /* 图片层 */
        .image {
            position: absolute;
            width: 115%;
            height: 115%;
            background-image: url(example.jpg);
            background-size: 100%;
            background-position: center;
            background-repeat: no-repeat;
            filter: blur(20px); /* 模糊效果，与宽高搭配做适当调整，把白边推出边界隐藏掉 */
        }
    </style>
</head>
<body>
    <div class="box"><!-- 图片外框 -->
        <div class="image"></div><!-- 图片层 -->
    </div>
</body>
</html>

实现效果如下图：