CSS - Gradient d'opacité CSS3

Sortir

Étape 3: Style le conteneur div

Accédez au conteneur div en utilisant le nom de classe avec le sélecteur de classe comme «#contenu principal»:

#contenu principal
Color d'arrière-plan: LightGreen;
marge: 20px 80px;
Border: 3px en pointillé bleu;

Ensuite, appliquez les propriétés CSS répertoriées ci-dessous:

• "Couleur de l'arrière plan"Est utilisé pour régler la couleur à l'arrière de l'élément.
• "marge"Alloce l'espace sur le côté extérieur de la frontière définie.
• "frontière»La propriété est utilisée pour déterminer une bordure autour de l'élément défini.

Étape 4: Paragraphe de style

Maintenant, stylisez le paragraphe en y accédant avec le nom de la classe ".paragraphe 1»:

.paragraphe 1
Couleur bleue;
débordement caché;
Position: relative;
MODE-MODE-MODED: Light dur;
taille de police: 30px;

Ici:

• "couleur»La propriété attribue une couleur au texte à l'intérieur du paragraphe.
• "débordement"Est utilisé pour afficher les résultats lorsque le contenu se déverse de la boîte d'un élément. Cette propriété détermine s'il faut saisir du texte ou ajouter des barres de défilement lorsque le contenu d'un tel élément est long à définir dans une zone particulière.
• "position»Définit la position de l'élément dans un document.
• "Mode de mélange»La propriété CSS est utilisée pour définir le contenu d'un élément mélangé avec le contenu racine et l'arrière-plan de l'élément.
• "taille de police"Est utilisé pour définir une police particulière pour le texte dans le paragraphe.

Étape 5: Définissez le «gradient linéaire» au paragraphe

Utilisez le «.paragraphe 1«Pour accéder à la classe«: après »:

.Paragraphe-1: après
Position: absolue;
En haut: 0px;
CONTEXTE: GRADIEUR LINÉAIRE (transparent, gris);
gauche: 0px;
contenu: "";
Largeur: 100%;
hauteur: 100%;
Pointer-Events: Aucun;

Selon l'extrait de code donné:

• "position"Est défini comme absolu dans cet extrait.
• "gauche" et "haut»Les propriétés sont utilisées pour régler la position de l'élément sur les côtés gauche et supérieur.
• "arrière-plan«Les propriétés définies comme« linéaire-gradient »crée un fond consistant en une transition continue entre les différentes couleurs avec une ligne droite.
• "contenu»La propriété est utilisée pour définir le contenu.
• "largeur"Alloue la largeur de l'élément.
• "hauteur»La propriété est utilisée pour régler la hauteur de l'élément défini.
• "événement du pointeur»Spécifie les conditions dans lesquelles un certain élément visuel est devenu la cible de l'événement

Sortir

On peut remarquer que le gradient d'opacité CSS a été appliqué avec succès.

Conclusion

Pour définir le gradient d'opacité, ajoutez d'abord du texte dans le paragraphe en utilisant le «

" étiqueter. Ensuite, accédez au paragraphe et appliquez le «arrière-plan«Propriété CSS et définissez la valeur de cette propriété comme«gradient linéaire". Il crée un fond composé d'une transition progressive entre deux couleurs ou plus le long d'une ligne droite. Cet article a expliqué le gradient d'opacité CSS.