CSS3实现毛玻璃效果

最新推荐文章于 2025-06-24 22:12:53 发布

原创

最新推荐文章于 2025-06-24 22:12:53 发布 · 573 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何利用CSS3的滤镜功能实现毛玻璃视觉效果，通过模糊和透明度的调整，创建出朦胧而优雅的界面元素。详细步骤包括思考实现方案、展示最终效果以及提供实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路

用before实现，给div添加一个before伪类，背景与大背景相同，大小也一致，
使用z-index放在div的下面，然后使用filter: blur实现背景模糊，再用margin移动边缘泛白部分即可。
div的背景设置为灰色透明

效果

在这里插入图片描述

代码


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>毛玻璃效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            min-height: 100vh;
            background: url(girl.jpg) fixed 0 / cover;
        }
        
        .t1 {
            display: block;