使用自定义代码降低英雄横幅背景的不透明度

关于英雄横幅元素

此 英雄旗帜元素 在 GemPages 中，背景通常用于在页面顶部创建一个大型视觉区域。它通常包括背景图像或背景颜色，以及标题、描述、按钮或其他文本元素等内容。

如果您的英雄横幅背景颜色太深，导致文字难以辨认，您可以…… 自定义代码 降低背景不透明度，使背景内容具有更好的对比度。

如何使用自定义代码降低英雄横幅背景的不透明度

步骤 1：打开英雄横幅元素的自定义代码面板

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

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

步骤 2：将自定义代码粘贴到英雄横幅中

将以下 CSS 代码粘贴到 自定义代码 箱：

ElementClass .hero-banner-bg {

  不透明度：0.7！重要；

}

步骤 3：替换 元素类 以及你的英雄旗帜的实际等级

在上面的代码中， 元素类 这只是占位符。你需要将其替换为你的英雄旗帜元素的实际类名。

最终的代码应遵循以下结构：

.your-element-class .hero-banner-bg {

  不透明度：0.7！重要；

}

什么 不透明度：0.7 是什么意思？

此 不透明 该属性控制英雄横幅背景的透明度。

它接受来自以下位置的值 0到1:

• 1 完全可见，无透明度
• 0.9 = 略微透明
• 0.7 中等透明
• 0.5 半透明
• 0 = 完全透明

在这个例子中：

不透明度：0.7;

英雄横幅的背景仍然可见，但看起来会更柔和，不那么显眼。这有助于使上方的文字更加清晰地突出。

不透明度示例值：

您可以根据所需效果调整不透明度值：

• 不透明度：0.9; → 背景几乎完全可见
• 不透明度：0.7; → 提高文本可读性的平衡之选
• 不透明度：0.5; → 背景明显变浅
• 不透明度：0.3; → 背景变得非常模糊

如果英雄横幅内的文字仍然难以辨认，请尝试进一步降低数值。