css实现遮罩效果以及帧布局使用

目标

实现一个遮罩效果，效果如下

实现

    <div>
          <style>
            #div1 { 
              width:300px; 
              height:180px ; 
              background:url('http://www.codefans.net/jscss/demoimg/wall3.jpg'); 
              position: relative;  //重点是这地方一：父容器用相对布局
              }
            #div2 {  
              height:40px;
              width: 300px; 
              filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.7;z-index:100; //这部分是透明定义
              background-color:#000000; 
              color: #FFFFFF ;
              position: absolute; //重点是这地方二：子容器用绝对布局
              bottom: 0;
              text-align: center; 
              line-height: 40px; 
              }
          </style>

          <div id="div1">
            <div >
              <div id="div2">这里是透明的DIV</div>
            </div>
          </div>
        </div>