Comment définir le dégradé de couleur de la police en CSS : 1. Utilisez "background-cli" et "text-fill-color" pour obtenir un dégradé de couleur de la police ; 2. Utilisez "mask-imag" pour définir le dégradé de couleur de la police ; ; 3. Utilisez "linearGradient, fill" pour définir le dégradé de couleur de la police.
L'environnement d'exploitation de cet article : système Windows 7, version CSS3, ordinateur DELL G3
Trois méthodes pour obtenir la couleur du texte dégradé avec CSS
Dans le processus de développement du front-end Web, les concepteurs d'interface utilisateur conçoivent souvent des dessins de conception avec du texte dégradé. Dans le passé, nous ne pouvions utiliser que des images png pour remplacer le texte. peut utiliser du CSS pur pour implémenter des dégradés. 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; }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;
} Description :
background: -webkit-linear-gradient(…) Fournit un arrière-plan dégradé pour les éléments de texte.
webkit-text-fill-color: transparent Remplit le texte avec une couleur transparente.
webkit-background-clip : le texte coupe l'arrière-plan avec du texte et remplit le texte avec l'arrière-plan dégradé comme couleur.
La deuxième méthode consiste à utiliser 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)));
}Explication :
mask-image est la même que background-image , non seulement La valeur peut être un chemin d'image ou une couleur dégradée.
La troisième méthode, utilisez LinearGradient, remplissez :
.gradient-text-three{
fill:url(#SVGID_1_);
font-size:40px;
font-weight:bolder;
}
<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>Explication :
En SVG, il existe deux dégradés principaux Type
:
Dégradé linéaire (linearGradient)
Dégradé radial (radialGradient)
Le dégradé en SVG peut non seulement être utilisé pour remplir des éléments graphiques, mais également 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">
<p class="panel panel-info">
<p class="panel-heading">
<h3 class="panel-title">方法1. background-clip + text-fill-color</h3>
</p>
<p class="panel-body">
<h3 class="gradient-text gradient-text-one">花样年华</h3>
</p>
</p>
<p class="panel panel-warning">
<p class="panel-heading">
<h3 class="panel-title">方法2. mask-image</h3>
</p>
<p class="panel-body">
<h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">豆蔻年华</h3>
</p>
</p>
<p class="panel panel-danger">
<p class="panel-heading">
<h3 class="panel-title">方法3. svg linearGradient</h3>
</p>
<p 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>
</p>
</p>
</section>
</body>
</html> Effet :
Apprentissage recommandé : "tutoriel vidéo CSS》
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
