css背景图片虚拟化

创建两个div盒子

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

<div class="for_pic"><div class="content">任何你实际维护的内容</div></div>//其设置的css代码如下：<style>.for_pic{//假设这是父容器的cssbackground: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>

这样应该就能达到效果了