In CSS können Sie das Attribut „Hintergrundbild“ oder „Hintergrund“ verwenden, um ein Hintergrundbild einzufügen. Das grundlegende Syntaxformat ist „Hintergrundbild/Hintergrund:URL(‘URL‘)“, und der Parameter URL wird verwendet, um das anzugeben Pfad des Hintergrundbildes.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5+CSS3-Version. Diese Methode ist für alle Computermarken geeignet.
Empfohlen: „CSS-Video-Tutorial“
In CSS können Sie das Hintergrundbild oder das Hintergrundattribut verwenden, um ein Hintergrundbild einzufügen.
background-image-Attribut Das
background-image-Attribut legt das Hintergrundbild eines Elements fest. Der Hintergrund eines Elements ist die Gesamtgröße des Elements, einschließlich Innenabstand und Rändern (jedoch nicht der Ränder).
Syntax:
background-image:url('URL'));
url('URL') URL des Bildes
Standardmäßig wird das Hintergrundbild in der oberen linken Ecke des Elements platziert und wiederholt die vertikale und horizontale Richtung.
Tipp: Bitte legen Sie eine verfügbare Hintergrundfarbe fest, damit, wenn das Hintergrundbild nicht verfügbar ist, stattdessen der Hintergrundfarbstreifen verwendet werden kann.
Hintergrundattribut
Das Hintergrundattribut ist eine Eigenschaft, die speziell den Hintergrund festlegt. Sie können die Hintergrundfarbe oder das Hintergrundbild festlegen.
Das Hintergrundattribut ist ein Kurzattribut, das alle Hintergrundattribute in einer Deklaration festlegen kann.
Die Attribute, die festgelegt werden können, sind:
Hintergrundfarbe: Gibt die zu verwendende Hintergrundfarbe an.
Hintergrundposition: Gibt die Position des Hintergrundbilds an.
Hintergrundgröße: Gibt die Größe des Hintergrundbilds an.
background-repeat: Gibt an, wie das Hintergrundbild wiederholt werden soll.
background-origin: Gibt den Positionierungsbereich des Hintergrundbilds an.
background-clip: Gibt den Zeichenbereich des Hintergrunds an.
background-attachment: Gibt an, ob das Hintergrundbild fest ist oder mit dem Rest der Seite scrollt.
Hintergrundbild: Gibt das zu verwendende Hintergrundbild an.
Beispiel:
background:url(bgimg.gif) no-repeat 5px 5px;
Wie in der Abbildung unten erklärt:
Hintergrundbildbeispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片设置</title>
<style>
.demo1{
width: 400px;
height: 200px;
background-color: #fff;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.demo2{
width: 400px;
height: 200px;
background:#fff url(bg.jpg) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="demo1"></div><br />
<div class="demo2"></div>
</body>
</html>
Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung Programmieren! !
Das obige ist der detaillierte Inhalt vonSo fügen Sie ein Hintergrundbild im CSS-Stil ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
