当前位置： 文江博客话题详情

Android WebView 样式背景颜色：在 android 2.2 上忽略透明

发布于 2024-10-17 11:29:17 字数 379 浏览 4 评论 0原文

我正在努力创建一个具有透明背景的 WebView。

webView.setBackgroundColor(0x00FFFFFF);
webView.setBackgroundDrawable(myDrawable);

然后我加载一个 html 页面，

<body style="background-color:transparent;" ...

WebView 的背景颜色是透明的，但一旦加载页面，它就会被 html 页面的黑色背景覆盖。这只发生在 android 2.2 上，它适用于 android 2.1。

那么是否需要在 html 页面代码中添加一些内容才能使其真正透明呢？

原文

I'm struggling to create a WebView with transparent background.

webView.setBackgroundColor(0x00FFFFFF);
webView.setBackgroundDrawable(myDrawable);

Then I load a html page with

<body style="background-color:transparent;" ...

The background color of the WebView is transparent but as soon as the page is loaded, it's overwritten by a black background from the html page. This only happens on android 2.2, it works on android 2.1.

So is there something to add in the html page code to make it really transparent ?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（23）

一抹微笑 2024-10-24 11:29:17

这对我有用，

mWebView.setBackgroundColor(Color.TRANSPARENT);

This worked for me,

mWebView.setBackgroundColor(Color.TRANSPARENT);
回复 原文
好久不见√ 2024-10-24 11:29:17

这个之前提到的问题底部有一个解决方案。
它是 2 个解决方案的组合。

webView.setBackgroundColor(Color.TRANSPARENT);
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

加载 URL 后将此代码添加到 WebViewer 时，它可以工作（API 11+）。

它甚至在硬件加速打开时也能工作

At the bottom of this earlier mentioned issue there is an solution.
It's a combination of 2 solutions.

webView.setBackgroundColor(Color.TRANSPARENT);
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

When adding this code to the WebViewer after loading the url, it works (API 11+).

It even works when hardeware acceleration is ON

回复 原文
月寒剑心 2024-10-24 11:29:17

我在 2.2 和 2.3 中也遇到了同样的问题。我通过在html中而不是在android中给出alpa值解决了这个问题。我尝试了很多方法，结果发现 setBackgroundColor(); 颜色不适用于 alpha 值。 webView.setBackgroundColor(Color.argb(128, 0, 0, 0)); 将不起作用。

所以这是我的解决方案，对我有用。

      String webData = StringHelper.addSlashes("<!DOCTYPE html><head> <meta http-equiv=\"Content-Type\" " +
      "content=\"text/html; charset=utf-8\"> </head><body><div style=\"background-color: rgba(10,10,10,0.5); " +
      "padding: 20px; height: 260px; border-radius: 8px;\"> $$ Content Goes Here ! $$ </div> </body></html>");

在 Java 中，

    webView = (WebView) findViewById(R.id.webview);
    webView.setBackgroundColor(0);
    webView.loadData(webData, "text/html", "UTF-8");

这是下面的输出屏幕截图。在此处输入图像描述

I had the same issue with 2.2 and also in 2.3. I solved the problem by giving the alpa value in html not in android. I tried many things and what I found out is setBackgroundColor(); color doesnt work with alpha value. webView.setBackgroundColor(Color.argb(128, 0, 0, 0)); will not work.

so here is my solution, worked for me.

      String webData = StringHelper.addSlashes("<!DOCTYPE html><head> <meta http-equiv=\"Content-Type\" " +
      "content=\"text/html; charset=utf-8\"> </head><body><div style=\"background-color: rgba(10,10,10,0.5); " +
      "padding: 20px; height: 260px; border-radius: 8px;\"> $$ Content Goes Here ! $$ </div> </body></html>");

And in Java,

    webView = (WebView) findViewById(R.id.webview);
    webView.setBackgroundColor(0);
    webView.loadData(webData, "text/html", "UTF-8");

And here is the Output screenshot below.enter image description here

回复 原文
蓝梦月影 2024-10-24 11:29:17

实际上这是一个错误，到目前为止还没有人找到解决方法。已创建一个问题。虫子仍然在蜂窝中。

如果您认为重要，请为其加注星标：http://code.google。 com/p/android/issues/detail?id=14749

Actually it's a bug and nobody found a workaround so far. An issue has been created. The bug is still here in honeycomb.

Please star it if you think it's important : http://code.google.com/p/android/issues/detail?id=14749

回复 原文
你穿错了嫁妆 2024-10-24 11:29:17

这是你的做法：

首先让你的项目基于11，但在AndroidManifest中将minSdkVersion设置为8

android:hardwareAccelerated =“false”是不必要的，并且它与8不兼容

wv.setBackgroundColor(0x00000000);
if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

this.wv.setWebViewClient(new WebViewClient()
{
    @Override
    public void onPageFinished(WebView view, String url)
    {
        wv.setBackgroundColor(0x00000000);
        if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
    }
});

为了安全起见，请将此放在你的风格中：

BODY, HTML {background: transparent}

在2.2上为我工作和 4

This is how you do it:

First make your project base on 11, but in AndroidManifest set minSdkVersion to 8

android:hardwareAccelerated="false" is unnecessary, and it's incompatible with 8

wv.setBackgroundColor(0x00000000);
if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

this.wv.setWebViewClient(new WebViewClient()
{
    @Override
    public void onPageFinished(WebView view, String url)
    {
        wv.setBackgroundColor(0x00000000);
        if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
    }
});

For safety put this in your style:

BODY, HTML {background: transparent}

worked for me on 2.2 and 4

回复 原文
最冷一天 2024-10-24 11:29:17

最重要的一点没有提到。

html必须具有 body 标记，并将 background-color 设置为 transparent。

所以完整的解决方案是：

HTML

    <body style="display: flex; background-color:transparent">some content</body>

Activity

    WebView wv = (WebView) findViewById(R.id.webView);
    wv.setBackgroundColor(0);
    wv.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    wv.loadUrl("file:///android_asset/myview.html");

The most important thing was not mentioned.

The html must have a body tag with background-color set to transparent.

So the full solution would be:

HTML

    <body style="display: flex; background-color:transparent">some content</body>

Activity

    WebView wv = (WebView) findViewById(R.id.webView);
    wv.setBackgroundColor(0);
    wv.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    wv.loadUrl("file:///android_asset/myview.html");
回复 原文
绳情 2024-10-24 11:29:17

下面的代码工作正常Android 3.0+，但是当您在 android 3.0 以下尝试此代码时，您的应用程序将被强制关闭。

webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

您在低于 API 11 上尝试以下代码。

webview.setBackgroundColor(Color.parseColor("#919191"));

或者

您也可以尝试下面的代码，该代码适用于所有API。

    webview.setBackgroundColor(Color.parseColor("#919191"));
    if (Build.VERSION.SDK_INT >= 11) {
        webview.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
    }

上面的代码对我来说是完整的。

below code works fine Android 3.0+ but when you try this code below android 3.0 then your app forcefully closed.

webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

You try below code on your less then API 11.

webview.setBackgroundColor(Color.parseColor("#919191"));

Or

you can also try below code which works on all API fine.

    webview.setBackgroundColor(Color.parseColor("#919191"));
    if (Build.VERSION.SDK_INT >= 11) {
        webview.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
    }

above code use full for me.

回复 原文
街道布景 2024-10-24 11:29:17

尝试
webView.setBackgroundColor(0);

Try
webView.setBackgroundColor(0);

回复 原文
反话 2024-10-24 11:29:17

以下代码对我有用，尽管我有多个网络视图并且它们之间的滚动有点缓慢。

v.setBackgroundColor(Color.TRANSPARENT);
Paint p = new Paint();
v.setLayerType(LAYER_TYPE_SOFTWARE, p);

Following code work for me, though i have multiple webviews and scrolling between them is bit sluggish.

v.setBackgroundColor(Color.TRANSPARENT);
Paint p = new Paint();
v.setLayerType(LAYER_TYPE_SOFTWARE, p);
回复 原文
浪荡不羁 2024-10-24 11:29:17

用这个

WebView myWebView = (WebView) findViewById(R.id.my_web);

myWebView.setBackgroundColor(0);

Use this

WebView myWebView = (WebView) findViewById(R.id.my_web);

myWebView.setBackgroundColor(0);
回复 原文
提笔落墨 2024-10-24 11:29:17
  • 在尝试了上面给出的一切之后。我发现你指定并不重要
    webView.setBackgroundColor(Color.TRANSPARENT) 在 loadUrl() /loadData() 之前或之后。
  • 重要的是您应该在清单中显式声明 android:hardwareAccelerated="false"。

在冰淇淋三明治上进行测试

  • After trying everything given above. I found it doesn't matter either you specify
    webView.setBackgroundColor(Color.TRANSPARENT) before or after loadUrl() /loadData().
  • The thing that matters is you should explicitly declare android:hardwareAccelerated="false" in the manifest.

Tested on IceCream Sandwich

回复 原文
故笙诉离歌 2024-10-24 11:29:17

只需使用这些行......

webView.loadDataWithBaseURL(null,"Hello", "text/html", "utf-8", null);
webView.setBackgroundColor(0x00000000);

并记住一点，在 webview 中加载数据后始终设置背景颜色。

Just use these lines .....

webView.loadDataWithBaseURL(null,"Hello", "text/html", "utf-8", null);
webView.setBackgroundColor(0x00000000);

And remember a point that Always set background color after loading data in webview.

回复 原文
御弟哥哥 2024-10-24 11:29:17
webView.setBackgroundColor(0x00000000);
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

这肯定会起作用..
使用 Editbackground 在 XML 中设置背景。
现在将显示背景

webView.setBackgroundColor(0x00000000);
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

this will definitely work..
set background in XML with Editbackground.
Now that background will be shown

回复 原文
别想她 2024-10-24 11:29:17

这不起作用，

android:background="@android:color/transparent"

将 webview 背景颜色设置为有效

webView.setBackgroundColor(0)

此外，我将窗口背景可绘制设置为透明

This didn't work,

android:background="@android:color/transparent"

Setting the webview background color as worked

webView.setBackgroundColor(0)

Additionally, I set window background drawable as transparent

回复 原文
北斗星光 2024-10-24 11:29:17

加载 html 后设置 bg（从快速测试来看，加载 html 似乎会重置 bg 颜色..这是针对 2.3 的）。

如果你从已经获得的数据加载html，只需执行一个.postDelayed，其中你只需设置bg（例如透明）就足够了。

set the bg after loading the html(from quick tests it seems loading the html resets the bg color.. this is for 2.3).

if you're loading the html from data you already got, just doing a .postDelayed in which you just set the bg(to for example transparent) is enough..

回复 原文
过潦 2024-10-24 11:29:17

如果 webview 是可滚动的：

  1. 将其添加到清单中：

    android:hardwareAccelerated="false"

或

  1. 将以下内容添加到布局中的 WebView：

    android:background="@android:color/transparent"
android:layerType="软件"

  2. 将以下内容添加到父滚动视图：

    android:layerType="软件"

If webview is scrollable:

  1. Add this to the Manifest:

    android:hardwareAccelerated="false"

OR

  1. Add the following to WebView in the layout:

    android:background="@android:color/transparent"
android:layerType="software"

  2. Add the following to the parents scroll view:

    android:layerType="software"
回复 原文
人生百味 2024-10-24 11:29:17

尝试

webView.setBackgroundColor(Color.parseColor("#EDEDED"));

Try

webView.setBackgroundColor(Color.parseColor("#EDEDED"));
回复 原文
桃扇骨 2024-10-24 11:29:17

我试图在我的 GL 视图上放置一个透明的 HTML 覆盖层，但它总是闪烁黑色，覆盖了我的 GL 视图。经过几天的尝试摆脱这种闪烁，我发现这个解决方法对我来说是可以接受的（但对 Android 来说是一种耻辱）。

问题是我需要硬件加速来实现漂亮的 CSS 动画，因此 webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null); 不适合我。

诀窍是在我的 GL 视图和 HTML 覆盖层之间放置第二个（空）WebView。我告诉这个 dummyWebView 在 SW 模式下渲染，现在我的 HTML 覆盖在 HW 下渲染平滑，不再有黑色闪烁。

我不知道这是否适用于我的宏碁 Iconia A700 以外的其他设备，但我希望我可以帮助别人解决这个问题。

public class MyActivity extends Activity {

    @Override
    protected void onCreate(Bundle icicle) {
        super.onCreate(icicle);

        RelativeLayout layout = new RelativeLayout(getApplication());
        setContentView(layout);

        MyGlView glView = new MyGlView(this);

        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);

        dummyWebView = new WebView(this);
        dummyWebView.setLayoutParams(params);
        dummyWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        dummyWebView.loadData("", "text/plain", "utf8");
        dummyWebView.setBackgroundColor(0x00000000);

        webView = new WebView(this);
        webView.setLayoutParams(params);
        webView.loadUrl("http://10.0.21.254:5984/ui/index.html");
        webView.setBackgroundColor(0x00000000);


        layout.addView(glView);
        layout.addView(dummyWebView);
        layout.addView(webView);
    }
}

I was trying to put a transparent HTML overlay over my GL view but it has always black flickering which covers my GL view. After several days trying to get rid of this flickering I found this workaround which is acceptable for me (but a shame for android).

The problem is that I need hardware acceleration for my nice CSS animations and so webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null); is not an option for me.

The trick was to put a second (empty) WebView between my GL view and the HTML overlay. This dummyWebView I told to render in SW mode, and now my HTML overlays renders smooth in HW and no more black flickering.

I don't know if this works on other devices than My Acer Iconia A700, but I hope I could help someone with this.

public class MyActivity extends Activity {

    @Override
    protected void onCreate(Bundle icicle) {
        super.onCreate(icicle);

        RelativeLayout layout = new RelativeLayout(getApplication());
        setContentView(layout);

        MyGlView glView = new MyGlView(this);

        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);

        dummyWebView = new WebView(this);
        dummyWebView.setLayoutParams(params);
        dummyWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        dummyWebView.loadData("", "text/plain", "utf8");
        dummyWebView.setBackgroundColor(0x00000000);

        webView = new WebView(this);
        webView.setLayoutParams(params);
        webView.loadUrl("http://10.0.21.254:5984/ui/index.html");
        webView.setBackgroundColor(0x00000000);


        layout.addView(glView);
        layout.addView(dummyWebView);
        layout.addView(webView);
    }
}
回复 原文
耳钉梦 2024-10-24 11:29:17

这对我有用。尝试在加载数据后设置背景颜色。对于 webview 对象上的 setWebViewClient ，例如：

    webView.setWebViewClient(new WebViewClient(){

        @Override
        public void onPageFinished(WebView view, String url)
        {
            super.onPageFinished(view, url);
            webView.setBackgroundColor(Color.BLACK);
        }
    });

This worked for me. try setting the background color after the data is loaded. for that setWebViewClient on your webview object like:

    webView.setWebViewClient(new WebViewClient(){

        @Override
        public void onPageFinished(WebView view, String url)
        {
            super.onPageFinished(view, url);
            webView.setBackgroundColor(Color.BLACK);
        }
    });
回复 原文
帅的被狗咬 2024-10-24 11:29:17

试用：

myWebView.setAlpha(0.2f);

Try out:

myWebView.setAlpha(0.2f);
回复 原文
但可醉心 2024-10-24 11:29:17

如果没有任何帮助，那么很可能您已经固定大小的webView，将宽度和高度更改为wrap_content或match_parent，它应该可以工作。当我尝试加载 Gif 时，这对我有用。

If nothing helps, then most probably you have fixed sized webView, change the width and height to wrap_content or match_parent, it should work. That worked for me when I tried to load a Gif.

回复 原文
甩你一脸翔 2024-10-24 11:29:17

您可以像这样使用 BindingAdapter：

Java

@BindingAdapter("setBackground")
public static void setBackground(WebView view,@ColorRes int resId) {
        view.setBackgroundColor(view.getContext().getResources().getColor(resId));
        view.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
}

XML：

<layout >

    <data>

        <import type="com.tdk.sekini.R" />


    </data>

       <WebView
            ...
            app:setBackground="@{R.color.grey_10_transparent}"/>

</layout>

资源

<color name="grey_10_transparent">#11e6e6e6</color>

You can user BindingAdapter like this:

Java

@BindingAdapter("setBackground")
public static void setBackground(WebView view,@ColorRes int resId) {
        view.setBackgroundColor(view.getContext().getResources().getColor(resId));
        view.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
}

XML:

<layout >

    <data>

        <import type="com.tdk.sekini.R" />


    </data>

       <WebView
            ...
            app:setBackground="@{R.color.grey_10_transparent}"/>

</layout>

Resources

<color name="grey_10_transparent">#11e6e6e6</color>
回复 原文
世俗缘 2024-10-24 11:29:17
myWebView.setAlpha(0);

是最好的答案。有用！

myWebView.setAlpha(0);

is the best answer. It works!

回复 原文
~没有更多了~

关于作者

爱要勇敢去追

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文