css3 背景高斯模糊 并添加遮照
.d1{ background-image:url("图片url"); background-size:100% 100%; -webkit-filter:blur(10px); filter:blur(10px); z-index:-1; width:100%; height:39%; position:fixed; _position:absolute; background-repeat:no-repeat; } .d2{ background:#222222; opacity: 0.7; background-size:100% 100%; -webkit-filter:blur(10px); filter:blur(10px); z-index:-1; width:100%; height:39%; position:fixed; _position:absolute; background-repeat:no-repeat; } .itemlist{ width:100%; float:left; border-bottom: 1px solid #eeeeee; background:#222222; opacity: 0.7; }
<div class="d1"> 放置背景图</div>
<div class="d2"> 遮照层</div>
<div class="itemlist"> 文字内容</div>