Heim >Web-Frontend >Front-End-Fragen und Antworten >So fügen Sie ein Hintergrundbild in CSS hinzu
So fügen Sie ein Hintergrundbild in CSS hinzu
- 藏色散人Original
- 2021-03-22 14:34:1710978Durchsuche
So fügen Sie ein Hintergrundbild in CSS hinzu: Erstellen Sie zunächst eine HTML-Beispieldatei. Anschließend legen Sie das Hintergrundbild über das Attribut „background-image:url(1.jpg)“ fest.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, DELL G3-Computer
In CSS können Sie das Hintergrundbild über das Attribut „Hintergrundbild“ oder das Attribut „Hintergrund“ festlegen. Das Attribut „Hintergrundbild“ wird verwendet, um das Hintergrundbild eines Elements festzulegen. Das Attribut „Hintergrund“ ist ein Kurzattribut, mit dem alle Hintergrundattribute in einer Anweisung festgelegt werden können.
background-Attributwert:
background-color gibt die zu verwendende Hintergrundfarbe an
background-position gibt die Position des Hintergrundbilds an
background-size gibt die Größe des Hintergrundbilds an
background-repeat gibt an, wie Wiederholen Sie das Hintergrundbild.
background -origin gibt den Positionierungsbereich des Hintergrundbilds an.
background-clip gibt den Malbereich des Hintergrundbilds an.
background-attachment legt fest, ob das Hintergrundbild fest ist oder mit dem scrollt Rest der Seite
background-image gibt ein oder mehrere zu verwendende Hintergrundbilder an
Der Hintergrund eines Elements ist die Gesamtgröße des Elements, einschließlich Innenabständen und Rändern (jedoch nicht der Ränder). Standardmäßig wird das Hintergrundbild in der oberen linken Ecke des Elements platziert und wiederholt sich sowohl vertikal als auch horizontal.
【Empfohlenes Lernen: CSS-Video-Tutorial】
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:450px;
height: 360px;
background-image:url(1.jpg);
/*background:url(1.jpg);*/
background-size:450px;/*设置图片大小*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonSo fügen Sie ein Hintergrundbild in CSS hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!