So legen Sie ein div-Hintergrundbild in HTML fest

WBOY
Freigeben: 2021-11-15 11:57:44
Original
54838 Leute haben es durchsucht

So legen Sie ein div-Hintergrundbild in HTML fest: 1. Verwenden Sie das style-Attribut des div-Elements. Die Syntax lautet „

"; 2. Fügen Sie „{background „ to div element -image:url(image name);}“ Stil.

So legen Sie ein div-Hintergrundbild in HTML fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So legen Sie div-Hintergrundbilder in HTML fest

1. Die Syntax zum Hinzufügen von Hintergrundbildern in div in HTML lautet wie folgt:

<div style="width:宽度值; height:高度值; background:url(图片名称.jpg);"></div>
Nach dem Login kopieren

Legen Sie Bilder und Webseiten in einen Ordner. Achten Sie auf das Bildsuffix . Hier ist es nur für .jpg geeignet. Bei JPG-Bildern können Sie das Suffix für andere Bildtypen selbst ändern.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div style="width: 200px;height: 100px;background: url(1115.08.png);"></div>
</body>
</html>
Nach dem Login kopieren

Ausgabeergebnis:

So legen Sie ein div-Hintergrundbild in HTML fest

2 Sie können das Hintergrundbild festlegen, indem Sie dem div-Element den Stil „{background-image:url(picture name);}“ hinzufügen. Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
.ellipse{
width: 400px;
height: 200px;
background-image: url(1115.08.png);
}
</style>
</head>
<body>
<div class="ellipse"></div>
</body>
</html>
Nach dem Login kopieren

Ausgabeergebnis:

So legen Sie ein div-Hintergrundbild in HTML fest

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonSo legen Sie ein div-Hintergrundbild in HTML fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage