Die Deckkraft des Hintergrunds eines Hero-Banners mithilfe von benutzerdefiniertem Code reduzieren

Über das Hero Banner-Element

Das Hero-Banner-Element In GemPages wird der <img>-Bereich häufig verwendet, um einen großen visuellen Abschnitt am oberen Seitenrand zu erstellen. Dieser enthält üblicherweise ein Hintergrundbild oder eine Hintergrundfarbe sowie Inhalte wie Überschrift, Beschreibung, Schaltfläche oder andere Textelemente.

Wenn der Hintergrund Ihres Heldenbanners zu dominant wirkt und den Text schwer lesbar macht, können Sie Folgendes verwenden: Benutzerdefinierter Code um die Deckkraft des Hintergrunds zu verringern und einen besseren Kontrast für den darin enthaltenen Inhalt zu erzeugen.

So verwenden Sie benutzerdefinierten Code, um die Deckkraft eines Hero-Banner-Hintergrunds zu reduzieren

Schritt 1: Öffnen Sie das Bedienfeld „Benutzerdefinierter Code“ des Hero-Banner-Elements.

Suchen Sie im GemPages-Editor nach dem/der Heldenbanner Element, das Sie anpassen möchten.

Dann, Klicken Sie mit der rechten Maustaste auf das Hero-Banner-Element. und wählen Sie Benutzerdefinierter Code.

Schritt 2: Fügen Sie den benutzerdefinierten Code in das Heldenbanner ein.

Fügen Sie den folgenden CSS-Code in den folgenden Bereich ein: Benutzerdefinierter Code Box:

ElementClass .hero-banner-bg {

  Deckkraft: 0.7 !Wichtig;

}

Schritt 3: Ersetzen ElementKlasse mit der tatsächlichen Klasse deines Heldenbanners

Im obigen Code, ElementKlasse ist nur ein Platzhalter. Sie müssen ihn durch die tatsächliche Klasse Ihres Heldenbanner-Elements ersetzen.

Ihr endgültiger Code sollte folgende Struktur aufweisen:

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

  Deckkraft: 0.7 !Wichtig;

}

Was bedeutet Deckkraft: 0.7 bedeuten?

Das Opazität Diese Eigenschaft steuert, wie transparent der Hintergrund des Hero-Banners erscheint.

Es akzeptiert Werte von 0 bis 1:

• 1 = vollständig sichtbar, keine Transparenz
• 0.9 = leicht transparent
• 0.7 = mäßig transparent
• 0.5 = halbtransparent
• 0 = vollständig transparent

In diesem Beispiel:

Opazität: 0.7;

Der Hintergrund des Heldenbanners bleibt zwar sichtbar, wirkt aber weicher und weniger dominant. Dadurch hebt sich der darüber platzierte Text besser ab.

Beispielhafte Deckkraftwerte:

Sie können den Deckkraftwert je nach gewünschtem Ergebnis anpassen:

• Opazität: 0.9; → Der Hintergrund bleibt fast vollständig sichtbar
• Opazität: 0.7; → eine ausgewogene Option zur Verbesserung der Textlesbarkeit
• Opazität: 0.5; → Der Hintergrund wird merklich heller
• Opazität: 0.3; → Der Hintergrund wird sehr schwach

Wenn der Text in Ihrem Hero Banner immer noch schwer lesbar ist, versuchen Sie, den Wert weiter zu verringern.