javascript - 使用 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 Fonts 中设置的节Manage Site页面，您可以使用颜色选择器获取颜色设置的十六进制值。

注意:

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

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