Question

我正在使用WebView来显示HTML内容，包括一个JavaScript函数，用于在按下链接时显示或隐藏页面的各个部分。默认情况下，所有部分都是隐藏的。一切正常，直到我将WebView的背景设置为透明，以便在其后面显示静态图像。

以下是相关的代码段：

HTML部分：

<a class="togglelink-show" onclick="toggle('zone1');">Test</a>
<div id="zone1" style="display:none">
    <p>Some random text that's normally hidden</p>
</div>

JavaScript的：

function toggle(id) {
    ele = document.getElementById(id);

    if(ele.style.display == "block") {
        ele.style.display = "none";
    } else {
        ele.style.display = "block";
    }
}

正如我写的那样，这两个工作正常，直到我使用webView.setBackgroundColor(0);将WebView设置为具有透明背景之后，在尝试打开某个部分时，有时WebView不会正确地重新布局，并且内容与以下部分重叠。

刷新页面或使用webView.clearView()不起作用，因为页面会在关闭部分时刷新。有什么建议吗？

如果还有另一种方法可以在webview后面显示静态图像，那么它的大小可以精确地适应屏幕，这也可以起作用。（我对HTML有点生疏，只能记住如何平铺背景图像，这当然不是我想要的。）

Answer 1

我也遇到了这个。我的解决方案是调用“webView.setBackgroundColor（0x01010101）;” 我认为它或多或少是透明的。

Answer 2

我已经解决了这个问题，但是以非常随意的方式解决了这个问题。我不知道哪些元素是魔术，但我最终得到的是这样的：

在主要内容窗口上方添加了一个空div，并编辑了样式：

<div id="fixedBackground"><img src="" width="0%" height="0%"/></div>
//From the stylesheet:
#fixedBackground    { position:fixed; top:0; left:0; width:100%; height:100%;}
.content {position:relative; z-index:1;}

这使得WebView的背景显示出来，并且在打开或关闭部分后，所有内容都会正确地重新定位。

使用透明WebView背景重叠内容

2 个答案: