uni-app中webview如何设置透明背景？

uni-app中webview如何设置透明背景？

<webview src="/hybrid/html/index.html" style="width:100px; height: 100px; background: transparent" />

这样设置无效，请教一下应当如何设置？

2 回复

目前iOS平台默认背景是透明的，Android平台还不支持设置背景。 Android平台已经作为Bug处理，HBuilderX3.1.19版本会修复。

更多关于uni-app中webview如何设置透明背景？的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中设置webview透明背景需要分平台处理：

  1. 对于H5平台： 可以直接使用CSS设置透明背景：
<webview src="/hybrid/html/index.html" style="background: transparent;"></webview>
  1. 对于App平台（iOS/Android）： 需要通过nvue页面实现，在pages.json中配置：
{
  "path": "pages/webview/webview",
  "style": {
    "navigationBarTitleText": "",
    "app-plus": {
      "titleNView": false,
      "background": "transparent"
    }
  }
}
  1. 对于iOS平台额外需要： 在manifest.json中配置：
"app-plus": {
  "webview": {
    "opaque": false
  }
}
  1. 如果webview内嵌的网页也需要透明，网页本身也需要设置：
<body style="background-color: transparent;">
回到顶部