Réduire l'opacité de l'arrière-plan d'une bannière principale à l'aide d'un code personnalisé

À propos de l'élément Bannière du héros

Le Élément de bannière de héros Dans GemPages, l'élément <div> est couramment utilisé pour créer une grande section visuelle en haut d'une page. Il comprend généralement une image ou une couleur de fond, ainsi que du contenu tel qu'un titre, une description, un bouton ou d'autres éléments textuels.

Si l'arrière-plan de votre bannière principale est trop chargé et rend le texte difficile à lire, vous pouvez utiliser Code personnalisé pour réduire l'opacité de l'arrière-plan et créer un meilleur contraste pour le contenu qu'il renferme.

Comment utiliser du code personnalisé pour réduire l'opacité de l'arrière-plan d'une bannière principale

Étape 1 : Ouvrez le panneau Code personnalisé de l’élément Bannière principale

Dans l'éditeur GemPages, repérez le Bannière de héros élément que vous souhaitez personnaliser.

Puis, clic droit sur l'élément Bannière du héros et sélectionnez Code personnalisé.

Étape 2 : Collez le code personnalisé dans la bannière principale

Collez le code CSS suivant dans le Code personnalisé du kit:

ElementClass .hero-banner-bg {

  opacité : 0.7 ! important ;

}

Étape 3 : Remplacer ElementClass avec la classe réelle de votre bannière de héros

Dans le code ci-dessus, ElementClass Ceci n'est qu'un espace réservé. Vous devez le remplacer par la classe réelle de votre élément de bannière de héros.

Votre code final doit suivre cette structure :

.votre-classe-élément .hero-banner-bg {

  opacité : 0.7 ! important ;

}

De quoi opacité : 0.7 signifier?

Le opacité Cette propriété contrôle la transparence de l'arrière-plan de la bannière principale.

Il accepte des valeurs provenant de 0 à 1 ans, qui:

• 1 = entièrement visible, aucune transparence
• 0.9 = légèrement transparent
• 0.7 = modérément transparent
• 0.5 = semi-transparent
• 0 = totalement transparent

Dans cet exemple:

opacité: 0.7;

L'arrière-plan de la bannière du héros restera visible, mais il paraîtra plus doux et moins imposant. Cela permettra au texte placé par-dessus de mieux ressortir.

Exemples de valeurs d'opacité :

Vous pouvez ajuster le niveau d'opacité en fonction du résultat souhaité :

• opacité: 0.9; → l'arrière-plan reste presque entièrement visible
• opacité: 0.7; → une option équilibrée pour améliorer la lisibilité des textes
• opacité: 0.5; → l'arrière-plan s'éclaircit sensiblement
• opacité: 0.3; → le fond devient très pâle

Si le texte à l'intérieur de votre bannière de héros reste difficile à lire, essayez de réduire encore la valeur.