使用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 Script HTML Service文件中的HTML必须如下所示：

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

将background设置为与您网站中的颜色相同的颜色。使用<section>代码并将高度设置为height:100vh。这确保整个框架将填充背景颜色。所有内容都需要包含在<section>标记中，背景设置为与网站相同的颜色，高度设置为垂直的100％。 （100vh）

这是一张图片，显示Apps脚本小工具的背景设置为灰色，网站设置为蓝色，以显示最终结果。如果我将Apps Script Gadget的背景设置为蓝色，您将看不到Apps脚本开始或结束的迹象。

如果您的网站有Theme，则背景颜色将设置为Theme。因此，您可能需要尝试使用颜色来获得与Theme匹配的颜色。如果在Themes, Colors, and Fonts页面的Manage Site部分中设置了网站背景颜色 手动 ，则可以使用颜色选择器获取十六进制值颜色设置是什么。

注意：

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

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