Maison >interface Web >tutoriel CSS >Article CSS : Comment définir un effet de dégradé sur le fond de la page (explication détaillée du code)
Article CSS : Comment définir un effet de dégradé sur le fond de la page (explication détaillée du code)
- 奋力向前original
- 2021-08-03 17:43:5315027parcourir
Dans l'article précédent "Comment utiliser le HTML pour créer un formulaire de soumission concis (explication détaillée du code)", je vous ai présenté comment utiliser le HTML pour créer un formulaire. L'article suivant vous présentera comment utiliser CSS pour définir le dégradé de couleur d'arrière-plan. Voyons comment le faire ensemble.
Ils peuvent tous représenter n'importe quelle couleur à leur manière, juste sous des angles différents.
En mode RVB, toutes les couleurs peuvent être obtenues en combinant différents rapports énergétiques de rouge, vert et bleu.
Par exemple :
rgb (100%, 0%, 0%) est rouge ;
rgb (100%, 50%, 0%) est orange-rouge ; %) est violet.
Vous pouvez tester ces valeurs séparément dans le navigateur
root { background rgb(100% 0% 0%); }
- rgb (100%, 0%, 0%) peut également s'écrire rgb (255, 0, 0), chaque couleur primaire est divisée en 255 parts égales.
- 0 signifie aucune intensité du tout, 255 signifie l'intensité la plus élevée. Bien que rgb(255,0,0) et rgb(100,0,0) soient tous deux rouges, le premier semble plus vif que le second en raison de sa forte intensité lumineuse.
- Cela est également bien prouvé en noir et blanc. Le noir en mode RVB est RVB (0, 0, 0) (les trois n'émettent aucune lumière), tandis que le blanc est RVB (255, 255, 255) (les trois émettent la lumière la plus forte).
- Comment définir un arrière-plan dégradé div avec CSS
1 Utilisez une balise div.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css颜色渐变</title> </head> <body> <div> </div> </body> </html>
2. Définissez la balise <div> à l'intérieur de la balise <code>header. div标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css颜色渐变</title>
<style type="text/css">
div{
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>2、header标签里面设置<div>标签。<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css颜色渐变</title>
<style type="text/css">
div{
width:150px;
height:70ps;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html></pre><p>3、颜色渐变，需要给<code>div设定width和height，宽度和高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css颜色渐变</title>
<style type="text/css">
div{
width:150px;
height:70ps;
background:-webkit-linear-gradient();
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>4、然后设置div的background背景属性，背景颜色渐变就用到-webkit-linear-gradient。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css颜色渐变</title>
<style type="text/css">
div{
width:150px;
height:70ps;
background:-webkit-linear-gradient(top);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>5、在-webkit-linear-gradient里面写top，设定渐变从顶部开始，到底部结束。写了top就不要写bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css颜色渐变</title>
<style type="text/css">
div{
width:150px;
height:70ps;
background:-webkit-linear-gradient(top,white,lightblue,skyblue);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>3. Pour le dégradé de couleurs, vous devez définir largeur et hauteur, largeur et hauteur pour div. rrreee
4. Ensuite, définissez l'attribut d'arrière-planbackground de div. Utilisez -webkit-linear-gradient pour le dégradé de couleur d'arrière-plan. rrreee
5. Écriveztop dans -webkit-linear-gradient et définissez le dégradé pour qu'il commence par le haut et se termine par le bas. Si vous écrivez top, n'écrivez pas bottom. rrreee
6. Définissez l'ordre du dégradé des couleurs. Vous pouvez définir plus de couleurs.
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!