Google应用程序脚本背景与HtmlService透明 [英] Google App Script background transparent with HtmlService

问题描述

我正在使用谷歌网站的谷歌应用程序脚本，并且我可以通过使用 UiApp.createApplication（）轻松创建透明背景。setStyleAttribute（background，transparent）

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

有什么想法？

解决方案

如果您的网站背景是主题，我无法找到将Apps脚本小工具背景与主题相匹配的方法。但是，如果网站背景是纯色，则可以将Gadget与HTML服务与网站颜色进行匹配。

您必须设置HTML的背景颜色服务的颜色与您网站页面的颜色相同。 HTML服务的背景色已经设置为透明。这是默认设置。您的Apps脚本代码所在的站点框架具有白色背景颜色。我找不到改变这种情况的方法。默认情况下，您的Apps脚本HTML服务具有透明背景，因为默认情况下HTML具有透明背景。这里有一个详细的解释，你必须做什么才能使Apps Script Gadget与你的网站相同：

h2>

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

如何编写HTML标记

主AppsScript HTML服务文件中的HTML必须如下所示：

 < section style =background：grey; height：100vh> 
< div> 
某些文字在这里
< / div> 
< / section> 
  

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

以下图片显示Apps Script小工具的背景设置为灰色，并且网站设置为蓝色，以显示最终结果将会。如果我已将Apps脚本小工具的背景设置为蓝色，则不会看到Apps脚本开始或结束的情况。

如果您的网站有一个主题

code>，背景颜色将被设置为 Theme 。因此，您可能需要尝试使用颜色来获取与 Theme 匹配的颜色。如果在主题，颜色和字体部分设置了 手动 的网站背景颜色< c> Manage Site 页面，您可以使用颜色选择器来获取颜色设置的十六进制值。

注意：

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

但HTML服务会覆盖它。如果您设置小工具背景颜色，当页面加载时，您将首先看到您在管理站点页面中设置的背景颜色，然后颜色将更改为背景颜色的HTML。我尝试将HTML服务背景设置为透明，并将小工具设置为一种颜色，但这种方式无效。

I'm using google apps script for a google site, and i can easily create a transparent background by using UiApp.createApplication().setStyleAttribute("background","transparent").

Now, I'm trying to create the script using HtmlService.createHtmlOutput(), but i can't figure out how to make the app's background transparent.

any ideas?

解决方案

If your Site background is a Theme, I can't find a way to match the Apps Script Gadget background to the theme. But if the Site background is a solid color, there is a way to match the Gadget with HTML Service to the Site color.

You must set the background color of your HTML service to the same color as your Sites page. The HTML Service background color is already set to transparent. That is the default. The Sites frame that your Apps Script code is in, has a background color of white. I can't find a way to change that. Your Apps Script HTML Service has a transparent background by default, because HTML has a background of transparent by default. Here is a detailed explanation of what you must do to get the Apps Script Gadget to be the same color as your Site:

Remove the Border In Sites Apps Script Frame

If you don't want the frame to show a border, uncheck "Include border around Apps Script gadget"

How To Write the HTML Markup

The HTML in your main Apps Script HTML Service file must look like this:

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

Set the background to the same color as the color in your Site. Use a <section> tag and set the height to height:100vh. This insures that the entire frame will be filled with the background color. Everything needs to be wrapped in that <section> tag with the background set to the same color as your Site, and the height set to 100 percent of vertical. (100vh)

Here is an image showing the background of the Apps Script Gadget set to gray, and the Site set to blue, in order to show you what the end result will be. If I had set the background of the Apps Script Gadget to blue, you would see no indication of were the Apps Script began or ended.

If your Site has a Theme, the Background color will be set to Theme. So you may need to experiment with colors to get one that matches the Theme. If the Site background color is manually set in the Themes, Colors, and Fonts section of the Manage Site page, you can use the color picker to get a hex value of what the color setting is.

NOTE:

There is a way to set the background color of gadgets:

But the HTML Service overrides it. If you set the Gadget Background color, when the page loads, you will first see the background color you set in the Manage Site page, then the color will change to the background color of the HTML. I tried setting the HTML Service background to transparent, and the gadget to a color, but that didn't work.

这篇关于Google应用程序脚本背景与HtmlService透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！