Heim > Artikel > Web-Frontend > CSS-Artikel: So legen Sie einen Verlaufseffekt auf dem Seitenhintergrund fest (ausführliche Code-Erklärung)
CSS-Artikel: So legen Sie einen Verlaufseffekt auf dem Seitenhintergrund fest (ausführliche Code-Erklärung)
- 奋力向前Original
- 2021-08-03 17:43:5314934Durchsuche
Im vorherigen Artikel „So erstellen Sie mit HTML ein prägnantes Einreichungsformular (detaillierte Code-Erklärung)“ habe ich Ihnen vorgestellt, wie Sie mit HTML ein Formular erstellen. Im folgenden Artikel erfahren Sie, wie Sie mit CSS den Hintergrundfarbverlauf festlegen. Sehen wir uns an, wie das gemeinsam geht.
Sie können alle jede Farbe auf ihre eigene Art und Weise darstellen, nur aus verschiedenen Blickwinkeln.
Im RGB-Modus können alle Farben durch die Kombination verschiedener Energieverhältnisse von Rot, Grün und Blau erhalten werden.
Zum Beispiel:
rgb (100 %, 0 %, 0 %) ist rot;
rgb (100 %, 50 %, 0 %) ist orangerot;
rgb (80 %, 0 %, 100). %) ist lila.
Sie können diese Werte separat im Browser testen
root { background rgb(100% 0% 0%); }rgb (100 %, 0 %, 0 %) kann auch als rgb (255, 0, 0) geschrieben werden, jede Primärfarbe ist in 255 unterteilt gleiche Teile.
0 bedeutet überhaupt keine Intensität, 255 bedeutet die höchste Intensität. Obwohl rgb(255,0,0) und rgb(100,0,0) beide rot sind, wirkt ersteres aufgrund seiner hohen Lichtintensität lebendiger als letzteres.
Das hat sich auch schwarz auf weiß bestens bewährt. Schwarz im RGB-Modus ist RGB (0, 0, 0) (alle drei geben kein Licht ab), während Weiß RGB (255, 255, 255) ist (alle drei geben das stärkste Licht ab).
So legen Sie den Div-Verlaufshintergrund mit CSS fest
1 Verwenden Sie ein div-Tag. div标签。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css颜色渐变</title> </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{
}
</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;
}
</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();
}
</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);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>2. Setzen Sie das <div>-Tag innerhalb des <code>header-Tags. <!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. Für den Farbverlauf müssen Sie width und height sowie width und height für div festlegen. rrreee
4. Legen Sie dann das Hintergrundattributdiv fest. Verwenden Sie -webkit-linear-gradient für den Hintergrundfarbverlauf. rrreee
5. Schreiben Sie top in -webkit-linear-gradient und stellen Sie den Verlauf so ein, dass er oben beginnt und unten endet. Wenn Sie top schreiben, schreiben Sie nicht bottom.
6. Legen Sie die Farbverlaufsreihenfolge fest. Sie können weitere Farben festlegen. rrreeeDas Rendering ist wie folgt:
🎜🎜🎜🎜Empfohlenes Lernen: 🎜CSS-Video-Tutorial🎜🎜Das obige ist der detaillierte Inhalt vonCSS-Artikel: So legen Sie einen Verlaufseffekt auf dem Seitenhintergrund fest (ausführliche Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!