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

Heim  >  Artikel  >  Web-Frontend  >  So legen Sie ein div-Hintergrundbild in HTML fest

So legen Sie ein div-Hintergrundbild in HTML fest

WBOY
WBOYOriginal
2021-11-15 11:57:4454811Durchsuche

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>

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>

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>

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!

Stellungnahme:
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