背景

在任意屏幕的 Screen settings 下方的 Fill 面板中设置背景。面板中的每个图层可以是纯色、渐变、图片或视频,一个屏幕可以叠加多个图层——这也是实现为图片或视频添加色调的方式。

图片

Flow builder background image

上传 .JPG.PNG.WEBP 格式的文件,大小不超过 20 MB。图片会自动缩放以覆盖整个背景区域。

Note

背景图片和视频会填满整个视口,包括刘海和系统栏后面的区域——即使启用了 Safe area 也是如此。请将重要内容远离边缘,以免被裁切。

如需在运行时通过应用代码动态替换背景图片,请启用自定义媒体 ID

视频

Flow builder background video

上传 .MP4.WEBM 文件,大小不超过 50 MB。预览区显示的是静态帧,但在设备上运行时会播放视频。

开启 Loop 可让视频循环播放。

如需在运行时动态切换背景视频,请启用自定义媒体 ID

纯色

Flow builder solid background

输入六位十六进制颜色值,例如 #FFFFFF,并将不透明度设置为 0 到 100%。输入缩写格式会导致发布失败。从色板中选择已保存的颜色样式以应用品牌色——背景将自动跟随你的浅色和深色主题。

渐变

Flow builder gradient background

构建多节点线性渐变:

  • Direction — 将渐变方向从 0 旋转到 360°。
  • Stops — 沿滑条拖动以调整位置。点击某个节点可编辑其六位十六进制颜色值和不透明度。
  • Opacity — 图层行上的滑块会同比缩放所有节点的不透明度,保持节点间的渐变过渡效果不变。
Configuring a gradient fill with multiple color stops

为背景添加色调

文字叠放在图片或视频上时,只有当背景足够深时才能清晰可读。为了使背景更均匀,可以在媒体上方叠加一个半透明图层:

  1. Screen settings 中,将 Fill 图层设置为您的图片或视频。
  2. 要添加第二个图层,点击 Fill 旁边的 。新图层会出现在列表顶部,覆盖在媒体内容之上。
  3. 点击图层的色块,选择 Gradient 。若只想加深文字所在边缘的区域,可将渐变设置为从该边缘的不透明色标渐变至另一侧的透明色标。
  4. 拖动图层行上的滑块,调整着色的强度。

拖动图层可调整其在堆叠中的位置,点击 可将其移除。

A gradient tint layer at 67% over an image layer in the Fill list