背景

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

背景也可以作为主视觉图片使用。要实现这个效果,请将内容放在滑动卡片中。

图片

Flow & Paywall Builder background image

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

Note

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

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

视频

Flow & Paywall Builder background video

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

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

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

纯色

Flow & Paywall Builder solid background

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

渐变

Flow & Paywall Builder gradient background

构建多节点线性渐变:

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

将背景用作主图

在流程中,你可以通过屏幕背景和滑动面板来构建主图效果。面板覆盖屏幕下半部分,随着用户滚动逐渐上移并遮盖背景。

  1. 将屏幕的填充设置为图片或视频,然后上传主图。

    Screen settings with Fill set to Image, and the hero photo filling the phone preview
  2. 添加一个滑动浮层: > Layout > Sliding sheet。

  3. 设置浮层的Start position——即浮层从底部向上覆盖屏幕的比例。默认值为 55%,此时背景从顶部 45% 处透出。

    Sliding sheet settings with Start position highlighted and Height locked to Auto, beside the phone preview showing the selected sheet over the hero photo
  4. 在滑动弹层中添加内容。

  5. 若要在主图上叠加标题或 Logo,请将这些元素放在弹层之外。它们会渲染在屏幕背景上方。

  6. 如有需要,可调整 Start position 来改变弹层的大小。此元素不支持设置绝对高度。

为背景添加色调

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

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

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

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