Explication détaillée de deux façons d'obtenir un dégradé de couleur de texte en utilisant du CSS pur-tutoriel CSS-php.cn

Explication détaillée de deux façons d'obtenir un dégradé de couleur de texte en utilisant du CSS pur

青灯夜游

Libérer： 2021-04-28 08:52:01

avant

3795 Les gens l'ont consulté

Cet article présente deux façons d'utiliser du CSS pur pour obtenir un dégradé de couleur de texte. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Explication détaillée de deux façons d'obtenir un dégradé de couleur de texte en utilisant du CSS pur

Explication

L'accent cette fois-ci est mis sur deux attributs,

attribut d'arrière-plan
attribut masque

Ces deux attributs sont respectivement les clés des deux méthodes d'implémentation.

Méthode 1

Rendu

Explication détaillée de deux façons dobtenir un dégradé de couleur de texte en utilisant du CSS pur

Code

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
 
    span {
        background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        color: transparent;
    }
    </style>
</head>

<body>
        <span>前端简单说</span>
</body>
</html>

Copier après la connexion

Il n'y a pas beaucoup de code, jetons un coup d'oeil,
background: linear-gradient(to right, red, blue);Cette ligne définit l'arrière-plan sur une couleur dégradée, faites attention ici, c'est une abréviation , En fait, il s'agit de définir la couleur du dégradé pour background-image, pas background-color, mais la valeur de l'image d'arrière-plan est la couleur du dégradé, si vous ne connaissez pas la couleur du dégradé, allez ici pour la voir directement <🎜. > CSS3 Gradient (Gradients)

Cette ligne est sur le point de parler de l'attribut background-clip Jetons un coup d'œil à la description sur W3Cschool -webkit-background-clip: text;

L'attribut background-clip spécifie le. zone de dessin de l'arrière-plan

Syntaxe
background-clip: border-box|padding-box|content-box;

Explication détaillée de deux façons dobtenir un dégradé de couleur de texte en utilisant du CSS pur

Il n'y a aucune mention du texte de valeur ci-dessus En voyant le préfixe précédent, vous devriez également pouvoir penser à ses problèmes de compatibilité, actuellement non pris en charge par tous les navigateurs.

Si la valeur est texte, cela signifie que le texte du bloc est utilisé comme zone de recadrage à recadrer vers l'extérieur. L'arrière-plan du texte est l'arrière-plan du bloc, et la zone en dehors du texte le sera. être recadrée.

Donc, nous écrivons enfin

pour rendre le texte transparent, ce qui signifie que la couleur de fond derrière celui-ci apparaîtra. color: transparent;

Méthode 2

Rendu

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />

<style type="text/css">
    h1{
        position: relative;
        color: yellow;
    }
    h1:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:pink;
        -webkit-mask:linear-gradient(to left, red, transparent );
    }
</style>
</style>
</head>

<body>
    <h1 text="前端简单说">前端简单说</h1>
</body>

</html>

Copier après la connexion

Le code n'est pas grand chose, parlons brièvement de it, Explication détaillée de deux façons dobtenir un dégradé de couleur de texte en utilisant du CSS pur

:before selector insère du contenu avant l'élément sélectionné.

Utilisez l'attribut content pour spécifier le contenu à insérer. content value attr est utilisé pour obtenir la valeur de l'attribut, content:attr (nom de l'attribut);

peut obtenir l'attribut texte de l'élément, l'attribut texte ici est lui-même As un attribut personnalisé, vous pouvez également ajouter un attribut tt à l'élément, comme ceci

Ensuite, écrivez l'attribut content comme ceci,

fonctionnera également.

D'accord, continuons à parler de l'objet de la deuxième méthode, l'attribut masque, car nous avons déjà écrit un article présentant l'attribut masque auparavant. content: attr(text); Parlons brièvement du masque en CSS : make good. utilisation de mask-image
Je ne le présenterai pas en détail ici. Les amis qui souhaitent en savoir plus peuvent lire l'article ci-dessus, qui vous sera certainement utile. <h1 tt="前端简单说">前端简单说</h1>
L'attribut masque permet simplement d'afficher ou de masquer une certaine partie de l'élément. content: attr(tt);On peut comprendre le principe de la deuxième méthode en regardant la photo

Résumé

Cette fois ces deux méthodes devrait être facile à comprendre. J’espère que cela sera utile à tout le monde. Explication détaillée de deux façons dobtenir un dégradé de couleur de texte en utilisant du CSS pur