Heim > Artikel > Web-Frontend > So legen Sie Hintergrundfarbe und Bild mithilfe von CSS fest
So legen Sie Hintergrundfarbe und Bild mithilfe von CSS fest
- 不言Original
- 2018-12-08 16:33:227110Durchsuche
So legen Sie die Hintergrundfarbe und das Bild mit CSS fest: 1. Legen Sie die Hintergrundfarbe über das Attribut „Hintergrundfarbe“ fest. 2. Legen Sie das Hintergrundbild über das Attribut „Hintergrundbild“ fest.
Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Um den Hintergrund mit CSS festzulegen, müssen wir das Hintergrundattribut verwenden. Über das Hintergrundattribut können wir einen Blick auf die spezifische Methode zum Festlegen des Hintergrunds werfen mit CSS.
Werfen wir zuerst einen Blick daraufCSS legt die Hintergrundfarbe fest
Wir müssen Hintergrundfarbe verwenden, um die Hintergrundfarbe zu ändern
background-color:value（颜色编码或者颜色名称）
in Im Wertebereich können Sie einen Farbcode wie #000000 oder einen Farbnamen wie Weiß eingeben, und die eingestellte Farbe ist die Hintergrundfarbe.
Der Anfangswert von „background-color“ ist transparent. In diesem Fall wird die Hintergrundfarbe des übergeordneten Elements angewendet. Wenn im übergeordneten Element keine Einstellung vorhanden ist, wird es weiß.
CSS-Einstellung des Bildhintergrunds
Durch die Verwendung des Attributs „Hintergrundbild“ können wir das auf den Server hochgeladene Bild als Hintergrund voreinstellen.
background-image: url("图像的路径");Geben Sie unter URL den Pfad zu der Bilddatei ein, die Sie als Hintergrund verwenden möchten. Wenn sich die CSS-Datei und die Bilddatei im selben Verzeichnis befinden, ist nur der Dateiname in Ordnung.
Als Pfade zu Bilddateien können sowohl absolute als auch relative Pfade verwendet werden.
Um einen relativen Pfad einzugeben, geben Sie den relativen Pfad zum externen Stylesheet ein, nicht den relativen Pfad zur HTML-Datei.
Dann schauen wir uns ein konkretes Beispiel an
Verwenden Sie Hintergrundfarbe, um die Hintergrundfarbe festzulegen
Der Code lautet wie folgt
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-color: skyblue;
}
</style>
</head>
<body>
<p>So legen Sie Hintergrundfarbe und Bild mithilfe von CSS fest设置</p>
</body>
</html>Das laufende Ergebnis
zeigt den folgenden Effekt im Browser an. Die angegebene Farbe Himmelblau wird als Hintergrundfarbe eingestellt
Verwenden Sie das Hintergrundbild, um das Hintergrundbild festzulegen
Der Code lautet wie folgt
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-image: url("img/t.jpg");
}
</style>
</head>
<body>
<p>So legen Sie Hintergrundfarbe und Bild mithilfe von CSS fest设置</p>
</body>
</html>Der Laufeffekt ist in der folgenden Abbildung dargestellt
Wenn die Bildschirmgröße größer als das Hintergrundbild ist, wird standardmäßig automatisch das Hintergrundbild angezeigt. Diese Einstellung kann mithilfe des Attributs „background-repeat“ geändert werden.
Die Anzeige des Hintergrundbilds beginnt in der oberen linken Ecke der Grundeinstellung. Diese Einstellung kann mit der Eigenschaft „background-position“
geändert werdenDas obige ist der detaillierte Inhalt vonSo legen Sie Hintergrundfarbe und Bild mithilfe von CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!