弹出层背景透明度有关问题.

弹出层背景透明度问题...

弹出层背景透明度有关问题.

想做如上的效果.

要求:

1.要适应全部的浏览器

2.可以自由更改透明度及其颜色

在线等...
[解决办法]

lightbox效果，获取视窗的宽和高，半透明层设置为视窗的高/宽，设置透明样式，浮动层那个自己计算为准，设置为absolute

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;style&gt;
.alpha{position:absolute;z-index:10;left:0px;top:0px;filter:alpha(opacity=50);opacity:.5;background:#000000;}
&lt;/style&gt;
&lt;script&gt;
    window.onload = function () {
        var backCompat = document.compatMode == 'BackCompat';
        var w = backCompat ? document.body.scrollWidth : document.documentElement.scrollWidth
        , h = backCompat ? Math.max(document.body.clientHeight, document.body.scrollHeight) : document.documentElement.scrollHeight;
        var div = document.createElement('div');
        div.className = 'alpha';
        div.id = 'lightbox';
        div.style.width = w + 'px';
        div.style.height = h + 'px';
        document.body.appendChild(div)
    }
&lt;/script&gt;
底层内容

[解决办法]
弹一个div 设置position为absolute/fixed left top bottom right都为0 透明ie用filter:alpha(opacity=50) w3c opacity:.5 颜色改变设置background-color
这些属性都可以通过js设置
[解决办法]
是的，背景层和弹出层不能是父子关系，否则opacity属性会影响弹出层。

不过即使是父子关系，也是有解的，那就是半透明不用opacity来解决。此方法兼容IE6+，chrome、firefox自不必说。
在支持css3的浏览器上，用backgorund: rgba(0,0,0,.4)，不支持rgba颜色的浏览器（IE678）使用IE filter中的gradient，IE滤镜的颜色支持alpha通道，startcolorstr/endcolorstr 取值是#AARRGGBB ,前两位表示alpha透明值。


.bg{
  background-color: rgba(0,0,0,.5);
  filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#88000000,endcolorstr=#88000000e);
}

弹出层背景透明度有关问题.

热点推荐