CSS实现背景图片透明，文字不透明效果的两种方法

1.毛玻璃效果：背景图 + 伪类 + flite:blur(3px)

.demo1{
     
	width:500px;
	height:300px;
	lin-height:50px;
	text-align:center;
}
.demo1:before{
     
	background:url(http://csssecrets.io/images/tiger.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	width:500px;
	height:300px;
	content:"";
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	-webkit-filter:blur(3px);
	filter:blur(3px);
}
"demo">背景图半透明，文字不透明
方法：背景图+fifter:blur:blur

2.半透明效果：背景图+定位+background:rgba(255,255,255,.3)

.demo2-bg{
     
	background:url(http://csssecrets.io/images/tiger.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	width:500px;
	height:300px;
	position:relative;
}
.demo2{
     
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	width:500px;
	height:300px;
	line-height:50px;
	text-align:center;
	background:rgba(255,255,255,.3);
}
"demo2-bg">
	
"demo2">
	背景图半透明，文字不透明

	方法：定位+background：rgba(255,255,255,.3)