Une technique de superposition dans CSS est un moyen de transposer du texte sur les images. Le CSS "image de fond"Et CSS"arrière-plan«Les propriétés sont utilisées pour réaliser cet effet de superposition. Le but de cet article est d'explorer comment utiliser CSS pour définir une image de superposition avec la couleur.

Les résultats de cet article sont:

• • Qu'est-ce que la propriété d'image en arrière-plan dans CSS?
  • Quelle est la propriété de fond dans CSS?
  • Comment régler l'image de superposition avec la couleur?

Commençons!

propriété d'image d'arrière-plan

Pour ajouter une image comme arrière-plan de tous les éléments HTML, le «image de fond»La propriété peut être utilisée.

Syntaxe

La syntaxe de la propriété d'image d'arrière-plan est:

Image d'arrière-plan: URL d'image ();

Spécifiez le nom de l'image ou son chemin complet dans l'URL ().

Quelle est la propriété de fond dans CSS?

Il s'agit d'une propriété raccourci utilisée pour attribuer différentes valeurs à l'image, telles que la couleur, la taille, la position, etc.

Syntaxe

La syntaxe de la propriété d'arrière-plan est:

Contexte: Couleur | Position | taille ;

• • couleur: Il est utilisé pour attribuer la couleur d'arrière-plan.
  • position: Il est utilisé pour définir la position d'arrière-plan.
  • taille: Il est utilisé pour spécifier la taille de l'arrière-plan.

Voici un exemple pour expliquer le point.

Exemple: comment régler l'image de superposition avec couleur?

Dans cet exemple d'abord, nous créerons un div, nommé «recouvrir"Et à l'intérieur de la div, nous avons ajouté une main avec

étiqueter:

Superposition d'image

Maintenant, nous allons ajouter une image d'arrière-plan à l'aide du CSS. Comme "URL ()", Nous avons donné le chemin d'image et attribué la largeur"350px, hauteur "250px", Et positionner"absolu«De l'image:

.image
Contexte: URL ("Image.jpg ") sans répétition;
Largeur: 350px;
hauteur: 250px;
Position: absolue;

Cela donnera la sortie suivante:

Maintenant, déplaçons un pas plus loin pour y appliquer l'effet de superposition:

.recouvrir
Contexte: RGBA (233, 140, 0, 0.7);
marge: 10px;
marge-gauche: 55px;
Largeur: 200px;
taille de police: 25px;
Couleur: RVB (252, 80, 0);
Position: absolue;

Ici, nous avons utilisé différentes propriétés CSS pour servir différentes fonctionnalités:

• • arrière-plan: Nous avons attribué une couleur de superposition en utilisant la propriété d'arrière-plan.
  • marge: Pour spécifier la position de la superposition, utilisez la propriété de marge.
  • largeur: Ce paramètre spécifie la taille de la superposition affichée sur l'image d'arrière-plan.
  • taille de police: Il spécifie la taille de la police.
  • couleur: Définit la couleur du texte.
  • position: Définit où le texte apparaîtra.

Après l'implémentation des points susmentionnés, enregistrez le code de fichier HTML et CSS et vérifiez le résultat:

Nous avons offert la méthode pour définir une image de superposition avec la couleur dans CSS.

Conclusion

L'effet de superposition peut être obtenu en utilisant CSS "image de fond"Et CSS"arrière-plan" propriétés. Cela peut être fait en attribuant une image à la propriété d'image d'arrière-plan et en définissant la couleur dans la propriété d'arrière-plan. De plus, c'est une technique de combinaison plus d'un élément dans un seul récipient. Ce message a démontré comment définir des images de superposition avec la couleur dans CSS à l'aide d'exemples.