html怎么背景模糊

在HTML和CSS中实现背景模糊效果，可以通过使用backdrop-filter属性或结合其他技术来达成。几种实现背景模糊的方法，并提供相应的代码示例。

方法一：使用 backdrop-filter 属性

backdrop-filter 是 CSS 中的一个属性，可以对元素的背景应用图形效果，如模糊或颜色偏移。这是实现背景模糊最直接的方式。

示例代码：

html
</p>



    
    
    <title>背景模糊示例</title>
    
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url('https://via.placeholder.com/800x600') no-repeat center center/cover;
        }

        .blur-box {
            width: 300px;
            height: 200px;
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 20px;
        }
    


    <div class="blur-box">这是一个模糊背景的盒子</div>



<p>

在这个例子中，.blur-box 使用了 backdrop-filter: blur(10px); 来模糊其背后的背景图像。

方法二：使用滤镜（filter）与伪元素

如果需要兼容不支持 backdrop-filter 的浏览器，可以考虑使用 filter 和伪元素来模拟背景模糊效果。

示例代码：

html
</p>



    
    
    <title>背景模糊示例</title>
    
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            background: url('https://via.placeholder.com/800x600') no-repeat center center/cover;
        }

        .blur-box {
            position: relative;
            width: 300px;
            height: 200px;
            margin: auto;
            top: 50%;
            transform: translateY(-50%);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 10px;
            overflow: hidden;
        }

        .blur-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: inherit;
            filter: blur(10px);
            z-index: -1;
        }

        .blur-box-content {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 20px;
            background: rgba(255, 255, 255, 0.2);
        }
    


    <div class="blur-box">
        <div class="blur-box-content">这是一个模糊背景的盒子</div>
    </div>



<p>

在这个例子中，.blur-box::before 使用了 filter: blur(10px); 来模糊背景图像，而实际的内容则放置在 .blur-box-content 中。