English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS linear-La fonction gradient() crée une image qui représente la dégradé linéaire des couleurs. Le résultat est un objet CSS de type <gradient>, qui est une forme spéciale de <image>.
Les exemples suivants montrent la dégradé linéaire allant du haut vers le bas, du rouge au jaune, puis au bleu :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base Tutorial(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(red, yellow, blue);
}
</style>
</head>
<body>
<h3>Dégradé linéaire - du haut au bas</h3>
<p>Dégradé linéaire allant du haut vers le bas, du rouge au jaune, puis au bleu :/p>
<div id="grad1></div>
<p><strong>Attention : </strong> Internet Explorer 9 et versions antérieures IE Navigateurs ne prennent pas en charge les dégradés.</p>
</body>
</html>Voyons voir ‹/›linear-La fonction gradient() est utilisée pour créer un "image" de dégradé linéaire.
Pour créer un dégradé linéaire, vous devez définir un point de départ et une direction (spécifiée par un angle) de l'effet de dégradé. Vous devez également définir la couleur de fin. La couleur de fin est la couleur vers laquelle Gecko doit effectuer une transition en douceur, et vous devez en spécifier au moins deux, bien que vous puissiez également spécifier plus de couleurs pour créer des effets de dégradé plus complexes.
Version prise en charge : CSS3
Les nombres dans le tableau représentent le numéro de version du navigateur prenant en charge la fonction pour la première fois.
"webkit" ou "moz" ou "o" indique le numéro de version de la première version prise en charge de la fonction.
| Fonction | |||||
|---|---|---|---|---|---|
| linear-gradient() | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
background-image: linear-gradient(direction, color-stop1, color-stop2, ...)
| Valeur | Description |
|---|---|
| direction | Spécifiez la direction de la dégradé (ou l'angle) en utilisant une valeur d'angle. |
| color-stop1, color-stop2,... | Utilisé pour spécifier les couleurs de départ et d'arrivée de la dégradé. |
Les exemples suivants montrent la dégradé linéaire partant de la gauche, du rouge au jaune:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base Tutorial(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* Affichage lorsque la dégradé linéaire n'est pas prise en charge: */
background-image: linear-gradient(to right, red, yellow);
}
</style>
</head>
<body>
<h3>Dégradé linéaire - de gauche à droite</h3>
<p>Dégradé linéaire partant de la gauche. Le point de départ est rouge, qui se transforme progressivement en jaune :</p>
<div id="grad1></div>
<p><strong>Attention : </strong> Internet Explorer 8 Les versions et plus anciennes ne prennent pas en charge le dégradé.</p>
</body>
</html>Voyons voir ‹/›Les exemples suivants montrent la dégradé linéaire allant de l'angle supérieur gauche au coin inférieur droit:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base Tutorial(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* Affichage lorsque la dégradé linéaire n'est pas prise en charge: */
background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>
<h3>Dégradé linéaire - diagonale</h3>
<p>Dégradé linéaire allant de l'angle supérieur gauche (au coin inférieur droit). Le point de départ est rouge, qui se transforme progressivement en jaune :</p>
<div id="grad1></div>
<p><strong>Attention : </strong> Internet Explorer 8 Les versions et plus anciennes ne prennent pas en charge le dégradé.</p>
</body>
</html>Voyons voir ‹/›Les exemples suivants montrent la démo de la dégradé linéaire spécifiant un angle:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base Tutorial(oldtoolbag.com)</title>
<style>
#grad1 {
height: 100px;
background-color: red; /* affiché lorsque le navigateur ne prend pas en charge */
background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
height: 100px;
background-color: red; /* affiché lorsque le navigateur ne prend pas en charge */
background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
height: 100px;
background-color: red; /* affiché lorsque le navigateur ne prend pas en charge */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 100px;
background-color: red; /* affiché lorsque le navigateur ne prend pas en charge */
background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>
<h3>Dégradé linéaire - Utilisation de différents angles</h3>
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
<p><strong>Attention : </strong> Internet Explorer 9 Les versions et plus anciennes ne prennent pas en charge le dégradé.</p>
</body>
</html>Voyons voir ‹/›Les exemples suivants montrent plusieurs couleurs de terminaison :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base Tutorial(oldtoolbag.com)</title>
<style>
#grad1 {
height: 55px;
background-color: red; /* affiché lorsque le navigateur ne prend pas en charge */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* grammaire standard (doit être placé en dernier) */
}
</style>
</head>
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Arrière-plan dégradé
</div>
<p><strong>Attention : </strong> Internet Explorer 8 Les versions et plus anciennes ne prennent pas en charge le dégradé.</p>
</body>
</html>Voyons voir ‹/›Les exemples suivants utilisent la transparence :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Base Tutorial(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>
<h3>Dégradé linéaire - Transparence</h3>
<p>Pour ajouter une transparence, nous utilisons la fonction rgba() pour définir les points de couleur. Le dernier paramètre de la fonction rgba() peut être un nombre allant de 0 à 1 valeur, qui définit la transparence des couleurs : 0 représente une transparence complète,1 représente une transparence complète.</p>
<div id="grad1></div>
<p><strong>Attention : </strong> Internet Explorer 8 Les versions et plus anciennes ne prennent pas en charge le dégradé.</p>
</body>
</html>Voyons voir ‹/›Tutoriel CSS : CSS3 Dégradé