效果：
代码：
<!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>背景毛玻璃效果</title>
<style>
.container {
width: 100%;
height: 100vh;
background-image: url("../static/yyqx.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
overflow: hidden;
}
.frosted-glass {
width: 100%;
height: 100vh;
background: inherit;
-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);
}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="frosted-glass"></div>
<div class="content">
<p>如果blur直接加在.container上，.container内的内容也会模糊</p>
<p>所以要加一个遮罩层 .frosted-glass</p>
<p>但加了.frosted-glass以后，会占据标准文档流，所以其他内容要脱离标准文档流才能显示在毛玻璃上方</p>
</div>
</div>
</body>
</html>
-
filter(滤镜)属性，是CSS3中非常有意思的一个属性（IE不支持），主要是运用在图片上，以实现一些特效。（尽管他们也能运用于video上）
filter-function具有以下值可选：grayscale灰度、sepia褐色（具体看图）、saturate饱和度、hue-rotate色相旋转、invert反色、opacity透明度、brightness亮度、contrast对比度、blur模糊、drop-shadow阴影 -
background-attachment属性用于设置背景图片定位的参照方式，它的取值有3个：- scroll：默认值，背景图片附着在背景容器上，它是相对于背景容器（元素）固定，它会随着背景容器的滚动，而不是随着它的内容滚动（也可以看成是对元素边框固定）。
- fixed： 背景图片附着在浏览器的可视区域。因为浏览器的可视区域不具备滚动的性格，所以它是不滚动的。
- local：这是CSS3新增的属性值。背景图片附着在背景容器的内容区域。它会随着内容的滚动而滚动。
-
vh是什么单位？
vh： 视窗高度的百分比（ 1vh 代表视窗的高度为 1%）
vw： 视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vmin 表示vh，vw中最小的那个
vmax表示vh，vw中最大的那个- vw、vh与 % 的区别：
% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。
- vw、vh与 % 的区别：