CSS毛玻璃特效

写下这篇博客的时候博主是相当懵比的，因为想不通为什么可以这样实现。但是这不妨碍把代码记下来。

那么我们先看效果图:

下面是实现的代码(图片请自备):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        body{
            background: url("./3_Jewel_8k.jpg") 0/cover fixed;
        }

        #main{
            margin: auto;
            width: 700px;
            height: 700px;
        }

        #content{
            color: blue;;
            position: relative;
            background: rgba(255, 255, 255, .3);
            width: 100%;
            height: 100%;
            font-size: 30px;
        }

        #content::after{
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: url("./3_Jewel_8k.jpg") 0/cover fixed;
            filter: blur(10px);
            z-index: -1;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="content">
            This is Content
            <p>Here are some meaningless words.Although I say they are meaningless, they are meaningful,because they make you know this beautiful box could run beautifully.</p>
        </div>
    </div>
</body>
</html>

以下所有内容都不建议观看，因为博主的代码虽然写出来了，但是对其的理解不透彻，所以分析中大概率会出现错误，从而误导读者。

也许看完这段代码的你有很多问号，比如为什么不把”::after”设置为rgba格式的背景，然后再加模糊，以及为什么不把”content” ID设置为rbga格式的背景再加模糊等。很遗憾的是，上面提到的两种方法都不行，把”::after”设置为rbga格式再加模糊，模糊的只是rbga格式的背景，透过背景看到的图片是不模糊的。而给”content”设置为rgba格式再加模糊，”content”里的内容也会一并模糊。我代码里写的这个方法是我目前发现的最简单的方法。那么下面开始讲实现的大致原理。

假设我们想让ID为”content”的元素实现模糊效果，首先给content加上”::after”伪元素，然后把这个伪元素”垫在” content下面(实际上就是伪元素在z轴的位置小于content)，这个伪元素的背景是一个图片，但是这个图片实现了与”body”元素的背景图的无缝衔接(就是这个实现无缝衔接的方式让我感到迷惑)，丝毫看不出这里有一张图片，之后模糊这张图片，就实现了毛玻璃效果。

那么接下来开始讲解代码中的内容，”content”设置了relative定位，目的是防止”:;after”伪元素的absolute定位脱标后占据整个body的空间。”z-index”设置了z轴的位置。”filter: blur(10px);”设置了模糊度，括号中的值越大越模糊。”background: url(“./3_Jewel_8k.jpg”) 0/cover fixed;”中”0/cover/fixed”的涵义是这样的: “background-position-x: 0; background-size: cover; background-attachment: fixed;”

关于”background-size”属性，MDN中是这样描述的: “设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。”。

而”background-attachment”属性，在MDN中的描述如下: “决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。”。

天知道为什么这两个属性凑一起会让元素的背景图无缝衔接body的背景图。

~~伴随着博主的懵比~~本篇完。