CSS3毛玻璃

	<div class="box">
			<div class="groundGlass">
				<p class="font">123123</p>
			</div>
		</div>

在使用CSS3之前我们需要了解以下元素
:before 伪元素在元素之前添加内容。
filter css的过滤器
要出现毛玻璃效果 必须要使用这个二个css 属性
如果要在图片上面实现毛玻璃也必须要在模糊地方使用图片

			html,
			body {
				width: 100%;
				height: 100%;
				background-color: #333333;
			}

			.box {
				width: 100%;
				height: 100%;
				background-image: url(homebg.png);
				background-repeat: no-repeat;
			}


			.groundGlass {
				width: 80%;
				height: 200px;
				margin: auto;
				border: 5px solid red;
			}

			.groundGlass:before {
				content: " ";
				width: 80%;
				height: 200px;
				margin: auto;
				position: absolute;
				left: 0px;
				right: 0px;
				background: url(./homebg.png) no-repeat;
				background-size: cover;

				/* background-attachment: fixed; */
				/* background-position: 50%; */

				-webkit-filter: blur(4px);
				filter: blur(4px);
			}

			.font {
				z-index: 3;
				transform: translateY(0%);
			}