Maison > Article > interface Web > Comment obtenir un dégradé linéaire d'arrière-plan en CSS3
Comment obtenir un dégradé linéaire d'arrière-plan en CSS3
- WBOYoriginal
- 2021-12-16 13:59:002007parcourir
En CSS, vous pouvez utiliser l'attribut "background-image" et la fonction "linear-gradient()" pour obtenir un dégradé linéaire de l'arrière-plan de l'élément. La syntaxe est "element {background-image:linear-gradient(gradient). direction, couleur 1, couleur 2..)".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment implémenter un dégradé linéaire d'arrière-plan en CSS3
Afin d'obtenir un dégradé linéaire de l'arrière-plan de l'élément en CSS, vous devez utiliser l'attribut background-image.
L'attribut background-image est utilisé pour définir le style d'arrière-plan de l'élément. Lorsque cet attribut est utilisé avec la fonction Linear-gradient(), l'arrière-plan de l'élément peut être défini sur un style de dégradé linéaire. La fonction
linear-gradient() est utilisée pour créer une image qui représente un dégradé linéaire de deux couleurs ou plus.
Pour créer un dégradé linéaire, vous devez spécifier deux couleurs. Vous pouvez également obtenir des effets de dégradé dans différentes directions (spécifiées sous forme d'angle). Si la direction n'est pas spécifiée, le dégradé sera par défaut de haut en bas.
L'exemple est le suivant :
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
#grad1 {
height: 300px;
background-image: linear-gradient(red, yellow ,red);
}
</style>
</head>
<body>
<p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p>
<div id="grad1"></div>
</body>
</html>Résultat de sortie :
(Partage de vidéos d'apprentissage : 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!