使用HtmlService透明的Google App Script背景

Question

我正在使用谷歌网站的谷歌应用程序脚本,我可以通过使用轻松创建透明背景UiApp.createApplication().setStyleAttribute("background","transparent").

现在,我正在尝试使用创建脚本HtmlService.createHtmlOutput(),但我无法弄清楚如何使应用程序的背景透明.

有任何想法吗？

Answer 1

如果您的网站背景是主题，我找不到将 Apps 脚本小工具背景与主题相匹配的方法。但如果站点背景是纯色，则有一种方法可以将带有 HTML 服务的小工具与站点颜色相匹配。

您必须将 HTML 服务的背景颜色设置为与站点页面相同的颜色。HTML 服务背景颜色已设置为透明。这是默认设置。您的 Apps 脚本代码所在的站点框架的背景色为白色。我找不到办法改变这一点。默认情况下，您的 Apps 脚本 HTML 服务具有透明背景，因为 HTML 默认情况下具有透明背景。以下详细说明了如何使 Apps 脚本小工具的颜色与您的网站的颜色相同：

删除站点应用程序脚本框架中的边框

如果您不希望框架显示边框，请取消选中“在 Apps 脚本小工具周围包含边框”

如何编写 HTML 标记

主 Apps 脚本 HTML 服务文件中的 HTML 必须如下所示：

<section style="background:gray; height:100vh">
<div>
  Some Text Here
</div>
</section>

将background颜色设置为与您站点中的颜色相同。使用<section>标签并将高度设置为height:100vh。这确保整个框架将被背景颜色填充。所有内容都需要包含在该<section>标签中，背景设置为与站点相同的颜色，高度设置为 100% 垂直。(100vh)

下面的图像显示 Apps 脚本小工具的背景设置为灰色，站点设置为蓝色，以便向您展示最终结果。如果我将 Apps 脚本小工具的背景设置为蓝色，您将看不到 Apps 脚本开始或结束的任何指示。

如果您的站点有Theme，则背景颜色将设置为Theme。因此，您可能需要尝试各种颜色以获得与Theme. 如果在页面部分手动设置站点背景颜色，您可以使用颜色选择器获取颜色设置的十六进制值。Themes, Colors, and FontsManage Site

笔记：

有一种方法可以设置小工具的背景颜色：

但 HTML 服务会覆盖它。如果您设置了小工具背景颜色，则当页面加载时，您将首先看到您在页面中设置的背景颜色Manage Site，然后该颜色将更改为 HTML 的背景颜色。我尝试将 HTML 服务背景设置为透明，并将小工具设置为颜色，但这不起作用。