css实现文字浮现，背景图片蒙版

1.效果图如下：

2.代码

方法一：
<div style="width:100%; position:relative;z-index:1; height: 100px;">
    <img src="@/assets/images/touxiang.png" style="width:100%; opacity:0.6; filter: alpha(opacity=60);"/>
    <div style="width:100%;position:absolute;z-index:2;top:0; right:0;">
        <h2 style="color:#fff">文字</h2>
    </div>
</div>

方法二：只提供了背景图蒙版，未涉及文字浮现代码
------------html-----------
 <div class="myBgBox">
        <div class="bgImg"/>
        <div class="bgImg"></div>
        <div class="bgBlurred"></div>
</div>
------------css------------
.myBgBox{
  background: url("~@/assets/images/touxiang.png"); 
  height: 100px;
  position: relative;
  .bgImg{
	    z-index: 0;
	    filter: blur(3px);
	    width: 100%;
	    height: 100%;
	    background-size: cover;
	    background-position: center;
	    position: absolute;
	    background-repeat: no-repeat;
  }
  .bgBlurred{
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    background: rgba(0, 0, 0, 0.5);
  }
}