<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>透明层-弹出层</title> <style> *{margin:0;padding:0;} .main{width:100%; height:1000px;} .div1{ top:0; left:0; width:100%; height:1000px; position:absolute; z-index:10;}
.div2{ width:100%; height:1000px; z-index:-1; position:absolute; /**透明层*/ background:#000000; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7; } .div3{ margin-left:100px; width:100px; height:200px; background:yellow; } </style></head><body > <div class="main">dsadd</div> <div class="div1"><!-- 因为子元素会继承父元素的透明层opacity 所以定义一个空div作为透明层 -->
<div class="div2"></div>
<div class="div3">wqeqwe</div> </div></body></html>