CSS 实现毛玻璃的效果

毛玻璃特效

.banner{
    
    
	width: 750px;
	height: 666px;
	margin-top: 30px;
	border-radius: 15px;
	background: inherit;  /* importment! 背景要用inherit继承父级背景, 要一直继承到你想要模糊的背景层*/
}

/* 毛玻璃的父级  必需,不能去掉 */
.banner .banner-back{
    
    
	background: inherit;/* importment! 背景要用inherit继承父级背景*/
	position: relative; 
}

/*毛玻璃层*/
.banner .banner-back .frosted-glass1{
    
    
	width: 750px;
	height: 666px;
	background: inherit; /* importment! 背景要用inherit继承父级背景*/
	filter: blur(5px);  /*  模糊 毛玻璃特效  */
	position: absolute; /* 把毛玻璃层浮到上层 */
}

/* 内容层 */
.banner .banner-back .game-detail{
    
    
	width: 712px;
	padding: 19px;
	position: absolute;/*再把你要显示的内容浮到上层,这样内容就不会被毛玻璃盖住了*/
}

<!-- 游戏列表 -->
					<div class="banner">
						<div class="banner-back">
							<!-- 毛玻璃特效 -->
							<div class="frosted-glass1"></div>
							<div class="game-detail">
								<h1><a class="amnite-h1">详细更新信息</a></h1>
								<div class="tag">
									<div class="tag-list">
										<b>2000-12-25</b>
									</div>
									<div class="tag-list">
										<b>1,024,886 ℃</b>
									</div>
									<div class="tag-list">
										<b><a href="javascript:void(0);">860</a></b>
									</div>
								</div>
								<div class="img-banner">
									<a href="javascript:void(0);">
										<img src="statics/img/9.26/cover2.jpg" >
									</a>
								</div>
							</div>
						</div>
					</div>

效果: