CSS實現毛玻璃效果

HTML

<!-- 背景容器層 -->
<div class="container"></div>
<!-- 遮罩層 -->
<div class="mask"></div>

CSS

　　　　　　　　　  body{
			padding: 0;
			margin: 0;
		}
		.container,
		.mask{
			height: 400px;
			width: 100%;
			position: absolute;
			top: 0;
		}
		.container{
			/* background: url(bg.png) no-repeat top/cover; */
			background-image: url(bg.png);
			background-repeat: no-repeat;
			background-position: top;
			background-size: cover;
			/* 高斯模糊 */
			filter: blur(10px); /* 容器四周出現灰色模糊帶 */
			z-index: -1;
		}
		.mask{
			background: #333; /* 黑色背景 */
			z-index: -2;　　/* 使遮罩層位於背景容器層下方，背景容器模糊帶消失 */
		}

測試

/* 給遮罩層加個top，使其和容器背景分開 */
.mask{
    top: 180px;
}

效果

 

最終效果