使用自定义代码为横幅添加渐变叠加层

渐变叠加可以改善英雄横幅的视觉效果，并使放置在其上的内容（例如）更加生动。 标题, 文本块 或 按键—更易于阅读。

关于英雄横幅元素

此 英雄旗帜 element 在 GemPages 中，这种布局通常用于在页面顶部创建一个醒目的大区域。它通常包含背景图片或颜色，并在其上方显示内容。

如果您的英雄横幅背景需要更高的对比度或更精致的外观，您可以使用自定义代码应用渐变叠加。

如何使用自定义代码添加渐变叠加层

步骤 1：打开自定义代码面板

在 GemPages 编辑器中，找到 英雄旗帜 您想要自定义的元素。

然后， 右键单击英雄横幅元素 并选择 自定义代码.

步骤 2：粘贴 CSS 代码

将以下代码粘贴到 自定义代码 框。

ElementClass .hero-banner-bg:after {

  内容： ””;

  位置：绝对;

  顶部：0;

  左：0;

  正确：0；

  底部：0

  background: linear-gradient(45deg, #253956, transparent) !important;

}

步骤 3：替换占位符值

保存代码之前，请将占位符值替换为您所需的设置。

• 替换元素类

元素类 是英雄旗帜元素实际类别的占位符。

将其替换为你的英雄旗帜的职业。

• 自定义渐变

以下代码行控制渐变效果的外观：

background: linear-gradient(45deg, #253956, transparent) !important;

您可以自定义以下值：

第 4 步：保存更改

使用您喜欢的类名和渐变设置更新代码后，保存自定义代码。

预览页面以确保渐变叠加层按预期显示。