css透明度的浏览器兼容以及div的隐藏和显示

实现背景透明，文字透明，必须把文字与背景分别放在不同的div中，对背景所在的div进行透明度的设置 这里背景的class为loginbakdiv 文字界面的div的class为loginDiv

jsp中的代码

<div id="loginbakDiv" onclick="loginout()"></div>

<div id="loginDiv">

<div class="l-title">

<ul>

<li>登录</li>

<li>注册</li>

</ul>

</div>

</div>

<script type="text/javascript" src="js/login.js"></script>

这里是实现登录注册时弹出登录界面。背景透明，同时通过对背景实现点击关闭登录界面事件，

script 代码

function login() {

document.getElementById("loginbakDiv").style.display = "block";

document.getElementById("loginDiv").style.display = "block";

}

function loginout() {

document.getElementById("loginbakDiv").style.display = "none";

document.getElementById("loginDiv").style.display = "none";

}

实现登录透明背景和登录界面的显示和关闭。即分别设置两个div的样式display（none时表示不显示，为block时为显示）

css 代码

#loginbakDiv {

z-index:120;

display: none;

margin-top: 0px;

position: fixed;

position: absolute;

background-color: #000000;

width: 100%;

height: 100%;

left: 0;

top: 0;

filter: alpha(Opacity = 80);//针对ie浏览器 80%

-moz-opacity: 0.8; // 针对于火狐浏览器  80%

opacity: 0.8;//针对除ie以外所有的浏览器 80%

z-index: 110;

}

#loginDiv {

z-index:110;

display: none;

position: fixed;

z-index: 120;

position: absolute;

margin: auto;

left: 30%;

top: 20%;

width: 500px;

height: 500px;

background-color: #FFFFFF;

}