ヒーローバナー要素を使用して画像にオーバーレイを追加する

画像へのオーバーレイ効果について

オーバーレイ効果は、画像の上に半透明のレイヤーを追加します。特に、背景画像とその上に配置されたテキストや要素とのコントラストを高めるのに効果的です。 

GemPages では、画像にオーバーレイを追加して、ページ上の主要なコンテンツに注目を集める洗練されたプロフェッショナルなデザインを実現できます。

ヒーローバナー要素を使用して画像にオーバーレイを追加する

画像にオーバーレイを追加するには、 ヒーローバナー GemPages で要素を追加するには、次の手順に従います。

ステップ1: ページにヒーローバナーを追加する

• アクセス GemPagesダッシュボード > ページ、対象のページを見つけてエディターを開きます。
• 左のサイドバーから ヒーローバナー 検索バーにヒーローバナー要素をドラッグ＆ドロップして、希望の位置に配置します。

ステップ2: ヒーローバナーに画像を追加する

• 要素をクリックして設定を開きます。 
• 左側のサイドバーで、 経歴 セクションの下に 設定 タブをクリックし、 画像 オプションを選択します。

• ここから、ギャラリーから画像を選択するか、要素の背景として使用する新しい画像をアップロードできます。 
• 画像のスケール、位置、繰り返し、アタッチメントを調整します。また、 プリロード 〜へ あり LCP を最適化します。

ステップ3: 画像のオーバーレイを有効にする

画像の設定が完了したら、 Show more すべて表示する 経歴 設定を行います。

の横にあるボックスをクリックします オーバーレイ 設定パネルを開くオプション。

ここからオーバーレイの色を選択し、不透明度を調整できます。

• 色： 画像の上に重ねる単色を選択します。121212進カラーコード（例：#XNUMX）を入力するか、カラーピッカーを使って視覚的に選択できます。

• 不透明度： 不透明度スライダーを調整するか、正確な数値を入力してオーバーレイの表示を制御します。 0 オーバーレイが完全に透明（非表示）であることを意味します。 100 背景画像を完全に覆うことを意味します。

例えば、不透明度 = 20 では、微妙な半透明のオーバーレイが適用されます。

よくあるご質問

1. 背景画像にオーバーレイを使用する必要があるのはなぜですか?

オーバーレイは、背景画像とテキストのコントラストを高めることで、テキストの読みやすさを向上させます。また、特にヒーローバナーやプロモーションセクションにおいて、よりプロフェッショナルで一貫性のあるビジュアルスタイルを実現します。

2. 使用するのに最適なオーバーレイ カラーは何ですか?

背景画像とテキストの色によって異なります。

• 暗いオーバーレイを使用する（例： #000000 or #121212) テキストが明るい色 (白、クリーム色など) の場合は、これを使用します。
• ライトオーバーレイを使用する（例： #FFFFFF テキストが暗い場合は、低不透明度のハイライトを使用します。

3. 最良の結果を得るには、どの程度の不透明度レベルを設定すればよいですか?

お勧め：

• 微妙な効果を出すには15～30%の不透明度
• 背景画像が雑然としていたり​​、カラフルな場合は、不透明度を30～50％にする

プレビューしながらスライダーを調整して、コンテンツに最適なものを確認します。

4. グラデーションオーバーレイは使えますか？

現時点では、GemPages V7は 単色オーバーレイ 画像の背景にグラデーション効果を適用する場合は、アップロード前にデザインツール（Figma、Canvaなど）で画像を編集することを検討してください。

5. ヒーローバナーにオーバーレイが表示されないのはなぜですか?

画像にオーバーレイ効果が表示されない場合は、次の点を確認してください。

• 画像が追加されたことを確認してください 経歴 > 画像.
• オーバーレイの色と不透明度が完全に透明に設定されていないことを確認してください（例：#000000 不透明度 0 の場合)。

6. オーバーレイはビデオの背景に適用されますか?

Yes. GemPages v7 では、オーバーレイ効果は、Hero Banner 要素の画像とビデオの背景の両方で機能します。

設定は同じです:

• オーバーレイの色を選択できます。
• 不透明度を調整して、ビデオがどの程度透けて見えるかを制御します。