カスタムコードを使用してヒーローバナーの背景の不透明度を下げる

ヒーローバナー要素について

その ヒーローバナー要素 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。 →背景が非常に薄くなる

ヒーローバナー内のテキストがまだ読みにくい場合は、値をさらに下げてみてください。