Plusieurs méthodes pour obtenir un dégradé de couleurs de texte en CSS-tutoriel CSS-php.cn

Plusieurs méthodes pour obtenir un dégradé de couleurs de texte en CSS

青灯夜游

Libérer： 2020-12-18 09:32:32

avant

1986 Les gens l'ont consulté

Plusieurs méthodes pour obtenir un dégradé de couleurs de texte en CSS

(Tutoriel recommandé : Tutoriel vidéo CSS)

Dans le processus de développement du front-end Web, les concepteurs d'interface utilisateur en conçoivent souvent avec du texte dégradé Dessins de conception. Dans le passé, nous ne pouvions utiliser que des images png pour remplacer le texte. Aujourd'hui, nous pouvons utiliser du CSS pur pour réaliser du texte dégradé. Voici 3 méthodes de mise en œuvre pour votre référence !

Style de base :

.gradient-text {
	text-align: left;
	text-indent: 30px;
	line-height: 50px;
	font-size: 40px;
	font-weight: bolder;
	position: relative;
}

Copier après la connexion

La première méthode, utilisez background-cli, text-fill-color :

.gradient-text-one{  
    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
}

Copier après la connexion

Description :

background: -webkit-linear-gradient(...) Fournit un arrière-plan dégradé pour les éléments de texte.
webkit-text-fill-color: transparent Remplissez le texte avec une couleur transparente.
webkit-background-clip: text Découpez l'arrière-plan avec du texte et remplissez le texte avec un arrière-plan dégradé comme couleur.

La deuxième méthode, utilisez mask-image :

.gradient-text-two {
	color: red;
}

.gradient-text-two[data-content]::after {
	content: attr(data-content);
	display: block;
	position: absolute;
	color: yellow;
	left: 0;
	top: 0;
	z-index: 2;
	-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, 
	                       from(yellow), to(rgba(0, 0, 255, 0)));
}

Copier après la connexion

Instructions :

mask-image est identique à background-image, non seulement la valeur peut être un chemin d'image, mais elle peut également être une couleur dégradée.

La troisième méthode, utilisez linearGradient, fill :

.gradient-text-three{
    fill:url(#SVGID_1_);
    font-size:40px;
    font-weight:bolder;
}

Copier après la connexion

<svg viewBoxs="0 0 500 300" class="svgBox">
    <defs>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
            <stop  offset="0" style="stop-color:yellow"/>
            <stop  offset="0.5" style="stop-color:#fd8403"/>
            <stop  offset="1" style="stop-color:red"/>
        </linearGradient>
    </defs>
    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
</svg>

Copier après la connexion

Instructions :

En SVG, il existe deux principaux types de dégradés :

Dégradé linéaire (linearGradient)
Dégradé radial (radialGradient)

Le dégradé en SVG peut être utilisé non seulement pour remplir des éléments graphiques, mais également pour remplir des éléments de texte

exemple dom :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, 
                             initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>CSS3渐变字体</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,html{width:100%;height:100%;}
        .wrapper{width:80%;margin:0 auto;margin-top:30px;}
        .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;
                font-weight:bolder; position: relative; }
        .gradient-text-one{  
            background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
            -webkit-background-clip:text; 
            -webkit-text-fill-color:transparent; 
        }
        .gradient-text-two{
            color:red;
        }
        .gradient-text-two[data-content]::after{
            content:attr(data-content);
            display: block;
            position:absolute;
            color:yellow;
            left:0;
            top:0;
            z-index:2;
            -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), 
                    to(rgba(0, 0, 255, 0)));
        }
        .gradient-text-three{
            fill:url(#SVGID_1_);
            font-size:40px;
            font-weight:bolder;
        }
    </style>
</head>
<body>
    <section class="wrapper">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">方法1. background-clip + text-fill-color</h3>
            </div>
            <div class="panel-body">
                <h3 class="gradient-text gradient-text-one">花样年华</h3>
            </div>
        </div>
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title">方法2. mask-image</h3>
            </div>
            <div class="panel-body">
                <h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">豆蔻年华</h3>
            </div>
        </div>
        <div class="panel panel-danger">
            
            <div class="panel-heading">
                <h3 class="panel-title">方法3. svg linearGradient</h3>
            </div>
 
            <div class="panel-body">
                <svg viewBoxs="0 0 500 300" class="svgBox">
                    <defs>
                        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" 
                                x1="0" y1="10" x2="0" y2="50">
                            <stop  offset="0" style="stop-color:yellow"/>
                            <stop  offset="0.5" style="stop-color:#fd8403"/>
                            <stop  offset="1" style="stop-color:red"/>
                        </linearGradient>
                    </defs>
                    <text text-anchor="middle" class="gradient-text-three" x="110px" 
                              y="30%">花信年华</text>
                </svg>
            </div>
 
        </div>
    </section>
</body>
</html>

Copier après la connexion

Effet :

Plusieurs méthodes pour obtenir un dégradé de couleurs de texte en CSS