Wie verwende ich ein Bild als Hintergrund in einem HTML-Dokument?-HTML-Tutorial-php.cn

Wie verwende ich ein Bild als Hintergrund in einem HTML-Dokument?

青灯夜游

Freigeben： 2022-01-12 15:37:59

Original

62047 Leute haben es durchsucht

In HTML können Sie das Bild als Hintergrund verwenden, indem Sie den CSS-Hintergrund- oder Hintergrundbildstil für das Body-Tag festlegen. Das Syntaxformat ist „background/background-image:url(“image path“);“.

Wie verwende ich ein Bild als Hintergrund in einem HTML-Dokument?

(Empfohlenes Tutorial: HTML-Tutorial)

Sie können das CSS-Attribut „Hintergrund“ oder „Hintergrundbild“ im HTML-Dokument verwenden, um das Bild als Hintergrund festzulegen. Sie können alle Hintergrundattribute in einer Anweisung festlegen. und „Hintergrundbild“ gibt ein oder mehrere Hintergrundbilder an, die verwendet werden sollen

Die Eigenschaften, die von „Hintergrund“ festgelegt werden können, sind: Hintergrundfarbe, Hintergrundposition, Hintergrundgröße, Hintergrundwiederholung, Hintergrundursprung, Hintergrundclip, Hintergrund- Anhang und Hintergrundbild.

Trennen Sie jeden Wert durch ein Leerzeichen, in keiner bestimmten Reihenfolge. Es ist möglich, dass nur einige dieser Werte zulässig sind, z. B. Hintergrund: #FF0000 URL (smiley.gif);

Beispiel: Verwenden Sie ein Bild als Hintergrund

<html>
<head>
<style type="text/css">
body
{ 
background: url(bg.jpg) ; 
/*background-image: url(bg.jpg);*/
}
</style>
</head>

<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>

</html>

Nach dem Login kopieren

Rendering:

Wie verwende ich ein Bild als Hintergrund in einem HTML-Dokument?

Dies ist eine Kachel mit mehreren Bildern, die den gesamten Bildschirm einnehmen sollen, Sie können das Attribut „Hintergrundwiederholung“ verwenden. oder auf dem Hintergrundattribut No-Repeat-Wert hinzufügen.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			body {
				/*background: url(bg.jpg) no-repeat;*/
				background-image: url(bg.jpg);
				background-repeat:no-repeat;
			}
		</style>
	</head>

	<body>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
		<p>这是一些文本。</p>
	</body>

</html>

Nach dem Login kopieren

Rendering:

Wie verwende ich ein Bild als Hintergrund in einem HTML-Dokument?

Weitere Programmierkenntnisse finden Sie unter: Programmierkurse! !

Das obige ist der detaillierte Inhalt vonWie verwende ich ein Bild als Hintergrund in einem HTML-Dokument?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!