使用 Hero Banner 元素在图像上添加叠加层

关于图像上的叠加效果

叠加效果会在图像上方添加一个半透明层。它对于增强背景图像与其上方文本或元素之间的对比度特别有用。 

在 GemPages 中，您可以为图像添加覆盖层，以实现时尚专业的设计，从而吸引人们注意页面上的关键内容。

使用 Hero Banner 元素在图像上添加叠加层

要使用 英雄旗帜 GemPages 中的元素，请按照下列步骤操作：

步骤 1：向你的页面添加英雄横幅

• 访问 GemPages 仪表板 > 前往，找到您的目标页面以打开编辑器。
• 从左侧边栏输入 英雄旗帜 在搜索栏中。然后，将英雄横幅元素拖放到您喜欢的位置。

第 2 步：向英雄横幅添加图片

• 单击该元素以打开其设置。 
• 在左侧边栏中，找到 背景 下的部分 个人设置 选项卡，然后单击 图片 选项。

• 从这里，您可以从图库中选择一个图像或上传一个新图像作为元素的背景。 
• 调整图像的比例、位置、重复和附件。此外，您还可以设置 预紧 至 是 优化 LCP。

步骤 3：启用图像的叠加功能

完成图像配置后，单击 显示更多 显示全部 背景 设置。

点击旁边的框 顶层罩面 打开设置面板的选项。

从这里，您可以选择覆盖颜色并调整不透明度。

• 颜色： 选择一种纯色覆盖在图像上。您可以输入十六进制颜色代码（例如 #121212），或使用颜色选择器直观地选择颜色。

• 不透明度： 调整不透明度滑块或输入精确的数字来控制覆盖层的可见程度。 0 表示覆盖层完全透明（不可见），而 100 意味着它完全覆盖背景图像。

举个例子，不透明度 = 20 将应用微妙的半透明覆盖。

常见问题

1. 为什么我应该在背景图像上使用覆盖？

叠加效果通过在背景图片和文本之间增加对比度来提高文本的可读性。它还能营造更专业、更一致的视觉风格，尤其适用于主打横幅或促销版块。

2. 最佳的覆盖颜色是什么？

这取决于您的背景图像和文本颜色：

• 使用深色覆盖（例如， #000000 or #121212）当您的文本颜色较浅（白色、奶油色等）时。
• 使用浅色覆盖（例如， #FFFFFF 当您的文本较暗时，请使用低不透明度。

3. 我应该设置多少不透明度才能获得最佳效果？

我们推荐：

• 15–30% 的不透明度可产生微妙的效果
• 如果背景图像繁杂或色彩丰富，则不透明度为 30–50%

在预览时调整滑块以查看最适合您的内容的滑块。

4. 我可以使用渐变叠加吗？

目前，GemPages V7 仅支持 纯色覆盖 在图片背景上。为了获得渐变效果，请考虑在上传之前使用设计工具（例如 Figma、Canva）编辑图片。

5. 为什么我的英雄横幅上没有显示覆盖层？

如果图像上未显示叠加效果，请检查以下内容：

• 确保已添加图像 背景 > 图片.
• 确保覆盖颜色和不透明度未设置为完全透明（例如，#000000 不透明度为 0）。

6. 叠加层适用于视频背景吗？

是的。 在 GemPages v7 中，叠加效果适用于 Hero Banner 元素中的图像和视频背景。

设置相同：

• 您可以选择覆盖颜色。
• 调整不透明度来控制视频显示的程度。