CSS après image

Nous utilisons le sélecteur «After» pour les superpositions d'image dans CSS. Les superpositions sont définies comme le revêtement sur quelque chose. Une superposition d'image signifie que nous couvrons l'image avec un peu de revêtement afin qu'il soit séparé du texte. L'utilisation des images est de couleurs différentes, mais notre texte est en une seule couleur, nous devons donc mettre la superposition entre le texte et l'image. Pour cela, nous utilisons le sélecteur «après» ou le pseudo-élément dans CSS pour produire ces superpositions entre l'image et le texte afin qu'il ne soit pas difficile de séparer le texte de l'image. Nous ne pouvons pas sélectionner le texte s'il n'y a pas de superposition entre le texte et l'image. Mais lorsque nous créons la superposition, alors nous sélectionnerons le texte que nous écrivons sur l'image.

Ce tutoriel vous montrera comment ajouter une superposition d'image en utilisant le pseudo-élément «After» dans CSS. Nous ajouterons l'effet de superposition d'image à l'aide de la pseudo-élément «après».

Exemple 1:

Pour utiliser le pseudo-élément «After» dans CSS, nous créons un fichier HTML. Le code que nous écrivons dans le fichier HTML est donné dans cet exemple. Vous pouvez utiliser l'éditeur de texte que vous souhaitez et commencer à coder dessus. Écrivez le code qui est présenté dans l'image suivante. Nous écrivons ce code dans le logiciel de code Visual Studio. En sélectionnant la langue HTML dans ce nouveau fichier, nous écrivons simplement "!". Appuyez sur Entrée puis les balises nécessaires apparaîtront automatiquement sur ce fichier. Commencez à coder dans son corps.

Nous créons une classe «section» nommée «Banner» et mettons une direction à l'intérieur de cette «bannière». Nous lions également ce HTML avec le fichier CSS, donc tous les styles que nous faisons dans le fichier CSS seront appliqués à ce code HTML. Nous l'enregistrons avec le «.Extension de fichier html ».

Code CSS:

Dans ce code CSS, nous utilisons la pseudo-élément «après» pour créer la superposition d'image. Pour le pseudo-élément «après», nous devons avoir le contenu, nous avons donc mis le «contenu» ici. Nous créons un élément à l'intérieur de la «bannière» après le contenu de la bannière. Maintenant, nous faisons le «bloc» «Block» et donnons la «position» à cette bannière comme «absolue». Le «haut» et la «gauche» sont tous les deux «0». Ensuite, nous avons réglé la «largeur» sur «100%» la même que la «hauteur» avec une valeur «100%». Nous utilisons le «gradient linéaire» pour «l'image d'arrière-plan» pour rendre l'image plus attrayante. Nous donnons un «120 degrés» à cela et avons mis deux couleurs sur cette propriété. Ensuite, nous avons réglé son «opacité» et avons mis le «0.Valeur de 7 ”pour cela. Nous utilisons ici la valeur de l'index z et mettons «0» pour cela.

Ensuite, nous avons fixé la position de la «bannière» à «relative». Nous utilisons également l'image d'arrière-plan à l'intérieur de la bannière. Le «rembourrage» que nous avons défini est «20VH» pour «haut» et «en bas» et «0» pour la «gauche» et la «droite». Nous avons défini la «couverture» pour la «taille de fond» et le «texte-alignement» au «centre». Maintenant, nous utilisons la bannière et sélectionnons tous les éléments de la bannière à l'aide du sélecteur «*». Lorsque nous utilisons ce sélecteur «*», il obtient tous les éléments et appliquez le style que nous mettons à l'intérieur sur tous les éléments. Alors que notre superposition couvre à la fois le texte et l'image, nous utilisons «l'index z» pour résoudre ce problème et nous définissons le contenu «Z-Index» sur «10». Et définir le «parent» pour sa «position».

Nous définissons la couleur du contenu sur «noir» afin que le contenu écrit à l'intérieur de la bannière apparaît en noir sur l'image. Nous «alignons» la rubrique »au« centre »et utilisons la famille« algérienne »pour cette rubrique. De plus, nous avons réglé sa taille sur «40px».

Sortir:
Vous pouvez obtenir la sortie sur le navigateur par défaut lorsque vous appuyez sur le "Alt + B" ou cliquez sur le bouton droit de la souris sur le fichier HTML, puis sélectionnez "Ouvrir le navigateur par défaut". La sortie donnée sera rendu sur le navigateur.

Exemple n ° 2:

Ici, nous avons un autre exemple dans lequel nous créons la superposition de l'image en utilisant le même pseudo-élément et changeons un peu notre code et vous montrez comment cela fonctionne.

Le code HTML est le même pour cet exemple. Mais ici, nous changeons la rubrique qui est écrite à l'intérieur de la bannière. Nous séparons cette tête en deux lignes en utilisant le «
" étiqueter.

Tout d'abord, nous définissons un peu le titre en y appliquant des propriétés de style. Nous définissons le «texte-alignement», la «taille de la police» et la «font-famille» de la rubrique. Ensuite, vient le pseudo-sélectionneur «After» qui crée une superposition entre l'image et le texte. Chaque fois que nous utilisons ce sélecteur «après» dans CSS, nous devons d'abord définir le «contenu». Après cela, nous avons défini son «affichage» sur «bloquer». Les valeurs «haut» et «gauche» que nous mettons ici sont définies sur «0». Tandis que les valeurs «largeur» et «hauteur» sont définies sur «100». Nous appliquons ensuite le «gradient linéaire» et sélectionnons deux couleurs pour ce qui est «rose» et «bleu». De plus, la propriété «Opacité» est utilisée ici pour donner une vue transparente de l'image d'arrière-plan. Nous définissons sa valeur sur «0.6 ”. Nous utilisons le «Centre d'arrière-plan.jpg ”comme image d'arrière-plan pour cela. Nous plaçons ce nom d'image dans la propriété «Image en arrière-plan» «URL».

Ensuite, nous utilisons le rembourrage pour créer l'espace et définir ses valeurs «haut», «inférieur», «droite» et «gauche» en utilisant une propriété «rembourrage». Ici, le «200VH» définit le rembourrage «haut» et «inférieur» et le «0» définit le rembourrage «gauche» et «droite». La «taille de fond» est «couverture» comme nous l'avons utilisé dans notre premier exemple. Ensuite, nous avons défini la «bannière» et «Z-Index». Pour cela, nous utilisons d'abord la pseudo-élément «après». À l'intérieur, nous avons réglé «-index» sur «1». Il donne un «1» Z-Index à la superposition. En dessous, nous définissons «l'index z» pour le «contenu» et appliquons «10» pour le contenu z-index. Nous utilisons le sélecteur «*» avec la «bannière» avant de donner un indice Z au contenu de la bannière. Cet indice Z s'applique à tout le contenu écrit dans la bannière. Nous utilisons également le «mélange-mélange-mode» pour la superposition que nous avons précédemment créée. Cette propriété «mélange de mélange-mélange» aide à mélanger les multiples éléments.

Lorsque nous utilisons cette propriété avec notre superposition, elle crée de nouvelles combinaisons incroyables pour nous. Nous pouvons faire de notre superposition une superposition avancée en utilisant ce «mélange-mélange-propriété» dans CSS. Après avoir terminé ce code, nous devons l'enregistrer avec un «.Extension de fichier CSS "car il s'agit du fichier CSS.

Sortir:

Conclusion

Nous avons discuté du pseudo-élément «après» dans CSS pour faire l'image de superposition dans ce tutoriel. Nous avons appris que la superposition est créée entre l'image d'arrière-plan et le texte afin que nous puissions sélectionner le texte, ce qui signifie que le texte est séparé de l'image. Nous avons utilisé le «mix-mélange-property» sur ces superpositions d'image pour les rendre plus attrayants. Nous avons également exploré les différents exemples et expliqué ces exemples dans ce tutoriel. Nous avons fourni tous les détails de ce tutoriel qui vous est nécessaire de comprendre ce pseudo-élément «après» dans CSS. Maintenant, vous pouvez créer ces superpositions sur vos projets après avoir compris ces exemples qui vous aideront beaucoup dans votre futur codage.