如何实现css的页面背景图片透明化而不影响文字内容

创建两个div盒子

其中第一个盒子格式内容如下：

<div class="for_pic">
	<div class="content">任何你实际维护的内容</div>
</div>
//其设置的css代码如下：
<style>
.for_pic{
	//假设这是父容器的css
	background:url(path_to_your_pic);//设置图片背景
	
}
//子容器也就是实际的内容所处的容器
.for_pic>.content{
			position:relative; //这三句很重要如果用absolute的话好像不显示图片
			left:0; //这三句很重要
			top:0; //这三句很重要
			width:100%; 
			height:100%;
	

}
//关键是利用before伪元素来设置实际内容容器，使得背景图片透明
.content::before{
					position:absolute;
					content:"";
					top:0;
					left:0;
					width:100%;
					height:100%;
					background:rgba(255,255,255,0.3);//这句设置图片透明度
					z-index:-1;
				}
</style>

这样应该就能达到效果了