Heim Web-Frontend HTML-Tutorial So legen Sie die Position des Hintergrundbilds in HTML fest

So legen Sie die Position des Hintergrundbilds in HTML fest

Jun 17, 2021 pm 02:56 PM
html 位置 背景图片

Die Möglichkeit, die Position des HTML-Hintergrundbilds festzulegen, besteht darin, das Attribut „Hintergrundposition“ zum Hintergrundbild hinzuzufügen und den entsprechenden Attributwert zu ändern, z. B. [Hintergrundposition: Mitte;].

So legen Sie die Position des Hintergrundbilds in HTML fest

Die Betriebsumgebung dieses Artikels: Windows 10-System, HTML 5, Thinkpad T480-Computer.

Wenn wir die Position des Hintergrundbilds im HTML-Code verschieben möchten, können wir tatsächlich das Attribut „Hintergrundposition“ verwenden. Viele Schüler kennen dieses Attribut möglicherweise noch nicht. Lassen Sie uns dieses Attribut unten vorstellen.

Die Eigenschaft „Hintergrundposition“ wird verwendet, um die Startposition des Hintergrundbilds festzulegen.

Seine allgemeinen Attributwerte sind wie folgt:

  • links oben

  • links in der Mitte

  • links unten

  • rechts oben

Codebeispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{ 
	background-image:url('smiley.gif');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center; 
}
</style>
</head>

<body>
<p><b>注意:</b>该属性工作在 Firefox 和 Opera, background-attachment 属性会被设置为 "fixed"。</p>
</body>
</html>
Nach dem Login kopieren

Sie können hinzufügen Kopieren Sie den obigen Code lokal und führen Sie ihn aus, um den Effekt zu sehen.

Verwandte Videofreigabe: HTML-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie die Position des Hintergrundbilds in HTML fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Verschachtelte Tabelle in HTML

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Tabellenrahmen in HTML

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

HTML-Rand links

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

HTML-Tabellenlayout

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Text in HTML verschieben

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

HTML-geordnete Liste

Wie analysiert und verarbeitet man HTML/XML in PHP? Wie analysiert und verarbeitet man HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

Wie analysiert und verarbeitet man HTML/XML in PHP?

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

HTML-Onclick-Button

See all articles