Comment obtenir un dégradé linéaire d'arrière-plan en CSS3-tutoriel CSS-php.cn

Comment obtenir un dégradé linéaire d'arrière-plan en CSS3

WBOY

Libérer： 2021-12-16 13:59:00

original

2011 Les gens l'ont consulté

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..)".

Comment obtenir un dégradé linéaire d'arrière-plan en CSS3

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>

Copier après la connexion

Résultat de sortie :

Comment obtenir un dégradé linéaire darrière-plan en CSS3