Question

当我遇到大页面上的问题时，我正在使用透明背景覆盖的JavaScript对话框。

如果页面很大，透明覆盖层将是纯色（即不再透明）。我做了一些测试，发现这只发生在覆盖层高于4096像素高（嗯，可疑，那是2 ^ 12）。

任何人都可以验证此问题吗？你见过一个解决方法吗？

这是我的测试代码（我正在使用Prototype）：

<style>
.overlayA { 
    position:absolute;
    z-index:10;
    width:100%;
    height:4095px;
    top:0px;
    left:0px;
    zoom: 1;
    background-color:#000;
    filter:alpha(opacity=10);
    -moz-opacity:0.1;
    opacity:0.1;
}

.overlayB { 
    position:absolute;
    z-index:10;
    width:100%;
    height:4097px;
    top:0px;
    left:0px;
    zoom: 1;
    background-color:#000;
    filter:alpha(opacity=10);
    -moz-opacity:0.1;
    opacity:0.1;
}
</style>
<div style="width:550px;height:5000px;border:1px solid #808080">
    <a href="javascript:// show overlay A" onclick="Element.show('overlayA')">Display A = 4096h</a>
    <br /><a href="javascript:// show overlay B" onclick="Element.show('overlayB')">Display B = 4097h</a>
</div>
<div id="overlayA" onclick="Element.hide(this)" class="overlayA" style="display:none"></div>
<div id="overlayB" onclick="Element.hide(this)" class="overlayB" style="display:none"></div>

Answer 1

由于你在CSS上有一个不透明度滤镜我相信你是间接使用DirectShow来进行alpha混合和图像合成。 DirectShow使用DirectX纹理，DX9的像素限制为4096x4096，这可以解释这种不稳定的行为。

Answer 2

如何将叠加层设置为窗口大小而不是页面大小，并在滚动时向上或向下移动。

Answer 3

你已经在边缘操作了（那个很大......）所以我不知道MS会把它归类为bug或“修复”它，即使它是。

您可能需要将其分解为较小的叠加DIV。

Answer 4

为什么不定位叠加层？
这样就不必像整个页面内容一样大。

简单地做：

 #Overlay{
  position:fixed;
  left:0px;
  top:0px;
  height:100%;
  width:100%;
  rest of declarations
 }

确保它的父文件是文档，文档的宽度和高度为100％。这样你就可以用更小的叠加效果。

posotion：fixed将确保叠加层相对于视口定位。因此它总是显示在左上角。

Answer 5

位置：固定解决方案是一个不稳定的解决方案。在IE中它得不到很好的支持。

最好的方法是自动创建和附加额外的透明元素（最大高度为2048px，以覆盖XP DX8，这也包含此问题）。

这是我使用的代码，假设您已经有一个浮动div解决方案。

    if(document.getElementById('document_body').scrollHeight > 2048)
    {
        document.getElementById('float_bg').style.height = "2048px";
        document.getElementById('float_bg').style.zIndex = -1;
        count=1;
        total_height=2048;
        while(total_height < document.getElementById('document_body').scrollHeight)
        {
            clone = document.getElementById('float_bg').cloneNode(true);
            clone.id = 'float_bg_'+count;
            clone.style.zIndex = -1;
            //clone.style.backgroundColor='red';
            clone.style.top = (count*2048)+"px";
            document.getElementById('float_el').insertBefore(clone,document.getElementById('float_bg'));
            count++;                

            this_add = 2048;
            if((total_height + 2048) > document.body.scrollHeight)
            {
                clone.style.height = (document.body.scrollHeight - total_height);
            }
            total_height += this_add;
        }
    }
    else
    {
            document.getElementById('float_bg').style.height = document.body.scrollHeight + "px";
    }

IE显示高度上的透明度错误＆gt; 4096px？

5 个答案: