HTML毛玻璃背景

最新推荐文章于 2025-06-12 15:33:05 发布

原创最新推荐文章于 2025-06-12 15:33:05 发布 · 1w 阅读

8 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS3实现HTML背景的毛玻璃效果。通过在body元素上叠加一个使用模糊滤镜的伪元素来达到视觉上的毛玻璃效果。

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

优快云博客开通以来一直没有写，今天这是第一篇，为了鞭策自己。
CSS3实现HTML背景毛玻璃效果

最近要做一个后台管理系统的界面。于是下载了不少模板，其中的Minimal模板的类似于毛玻璃的背景图片效果十分惊艳。他是直接设置背景图实现的，我就想这种效果是否能用CSS3实现呢？果然在查阅不少资料之后，对这个想法进行了实现，效果如下：
这里写图片描述

大致思路是将body的background设置为想要作底部背景的图片。然后在body上再添加一个div，作毛玻璃。
HTML代码如下：

    <body>
       <div class="glass">
       </div>
    </body>

CSS代码如下：

      body,.frosted-glass::before 
    {

       background:url(background4.jpg) no-repeat;
       background-position: left top;
       background-size:100% 100%;
       margin:0px; 
       padding:0px;
       background-attachment: fixed;

    }

    .glass
    {
        width: 100%;
        height: 100%;
        background: inherit;  
        position: relative;

    }
    .glass::before 
    {
         content: '';
         position: fixed;
         top: 0; right: 0; bottom: 0; left: 0;
         -webkit-filter: blur(5px);   
         -moz-filter: blur(5px);   
         -ms-filter: blur(5px);   
         -o-filter: blur(5px);   
         filter: blur(5px);   
         filter: progid:DXImageTransform.
         Microsoft.Blur(PixelRadius=4, MakeShadow=false);   
    }