JS opacity元素对我在Chrome中的DIV框完全没有影响

时间:2010-09-14 17:59:47

标签: javascript

您好我下面有一个js脚本,我希望我的页面上的不透明度非常小。但它绝对没有任何价值的影响。有谁能建议我做错了吗?谢谢

    dx = document.getElementById('box').style

dx.backgroundColor= '#fff' 
dx.visibility = "visible";
dx.width = 800 + "px" ;
dx.height = 40 + "px" ;
dx.top = 600 + "px" ;
dx.overflow = "hidden" ;
dx.marginLeft = "-400px";

tab = "<table width='800' border='0' cellpadding='1' > <tr> <td width='75' ></td> <td width='200'></td> <td width='75' ></td> <td ></td>  </tr>  <tr> <td align='left' valign='middle'><div align='right'>Contact</div></td> <td colspan='4' align='left' valign='middle'><input name='Pcontact' type='text' id='Pcontact' size='20' /> Number <input name='Pnumber' type='text' id='Pnumber' size='20' /> Mail <input name='Pmail' type='text' id='Pmail' size='25' /> <input name='addcontact' type='button' id='addcontact' value='Add Contact'  /></td> </tr> </table>" ;

document.getElementById('box').innerHTML = tab 

dx.opacity = 10 ;

在css中,我的框中有以下内容

#box {
position:fixed;
width: 600px;
height: 700px;
top: 40px ; 
border: 2px solid black;
background-color:#CCC; 
left:50% ; 
margin-left:-300px;
visibility:hidden ;
overflow:scroll ; 

}

box div的大小在我的js中,因为它有多种用途

3 个答案:

答案 0 :(得分:2)

opacity的范围为0到1,您将其设置为10.

您可能意味着0.10.9

答案 1 :(得分:1)

要完成,你真的应该这样做:

var opacity = 10;
dx.opacity = (opacity/100); // standard
dx.MozOpacity = (opacity/100); // older firefox
dx.KhtmlOpacity = (opacity/100); // older safari
dx.filter = “alpha(opacity=” + opacity + “)”; // IE

虽然,我个人只是这样做:

var opacity = 10;
dx.opacity = (opacity/100); // standard
dx.filter = “alpha(opacity=” + opacity + “)”; // IE

因为Firefox和Safari用户通常会升级他们的浏览器。

答案 2 :(得分:0)

这对你有用吗?或者您是否需要透明的所有元素?

#box {
position:fixed;
width: 600px;
height: 700px;
top: 40px ; 
border: 2px solid black;
background-color:rgba(204, 204, 204, 0.1);
left:50% ; 
margin-left:-300px;
visibility:hidden ;
overflow:scroll ; 
}

http://www.css3.info/introduction-opacity-rgba/