div透明与两个div重叠位置设置

最近需要做一个页面动态文字水印，就是在每个页面显示登录人、访问时间、访问模块等一些基本信息的水印。然后了解了一下水印经过特殊处理的div展现。

• 网上找的一个css样板。

  <div>
  <p>绿色背景</p>
<div class="box"><b onclick="javascript:alert('文字部分');">文字部分</b></div>
<p>绿色背景+30%透明度</p>
<div class="box opacity">文字部分</div>
  </div>

• css样式

.box{width:100px;height:100px;background:green;margin-bottom:50px;text-align:center;color:red;line-height:100px;}
.opacity{-khtml-opacity:0.3;-moz-opacity:0.3;filter:alpha(opacity=30);filter:"alpha(opacity=30)";opacity:0.3;}/*这个ie8不产生效果，ie不支持opacity属性(透明度)*/
/*兼容ie8：filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
  div重叠：position:absolute; z-index:-1;表示div的位置，z-index越大越在上面，这里-1表示两个div重叠另一个div没有赋值这两个属性那么还想再它下面就给：-1。
*/
.opacity{position:absolute;width:100px;-khtml-opacity:0.2;-moz-opacity:0.2;filter:alpha(opacity=20);filter:"alpha(opacity=20)";opacity:0.2; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);z-index:-1 /*兼容ie8及以下*/}

• 效果

ie8不兼容状态