suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie verwende ich ein Bild als Hintergrund in einem HTML-Dokument?

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

青灯夜游
青灯夜游Original
2020-10-26 15:50:3862026Durchsuche

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>

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>

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!

css html position background
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
Vorheriger Artikel：Erfahren Sie mehr über Codierungskonventionen in HTMLNächster Artikel：Erfahren Sie mehr über Codierungskonventionen in HTML

In Verbindung stehende Artikel

Mehr sehen