suchen

Heim >Web-Frontend >CSS-Tutorial >So fügen Sie ein Hintergrundbild im CSS-Stil ein

So fügen Sie ein Hintergrundbild im CSS-Stil ein

青灯夜游
青灯夜游Original
2020-12-18 11:10:5621369Durchsuche

In CSS können Sie das Attribut „Hintergrundbild“ oder „Hintergrund“ verwenden, um ein Hintergrundbild einzufügen. Das grundlegende Syntaxformat ist „Hintergrundbild/Hintergrund:URL(‘URL‘)“, und der Parameter URL wird verwendet, um das anzugeben Pfad des Hintergrundbildes.

So fügen Sie ein Hintergrundbild im CSS-Stil ein

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5+CSS3-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen: „CSS-Video-Tutorial“

In CSS können Sie das Hintergrundbild oder das Hintergrundattribut verwenden, um ein Hintergrundbild einzufügen.

background-image-Attribut Das

background-image-Attribut legt das Hintergrundbild eines Elements fest. Der Hintergrund eines Elements ist die Gesamtgröße des Elements, einschließlich Innenabstand und Rändern (jedoch nicht der Ränder).

Syntax: 

background-image:url('URL'));

  • url('URL') URL des Bildes

Standardmäßig wird das Hintergrundbild in der oberen linken Ecke des Elements platziert und wiederholt die vertikale und horizontale Richtung.

Tipp: Bitte legen Sie eine verfügbare Hintergrundfarbe fest, damit, wenn das Hintergrundbild nicht verfügbar ist, stattdessen der Hintergrundfarbstreifen verwendet werden kann.

Hintergrundattribut

Das Hintergrundattribut ist eine Eigenschaft, die speziell den Hintergrund festlegt. Sie können die Hintergrundfarbe oder das Hintergrundbild festlegen.

Das Hintergrundattribut ist ein Kurzattribut, das alle Hintergrundattribute in einer Deklaration festlegen kann.

Die Attribute, die festgelegt werden können, sind:

  • Hintergrundfarbe: Gibt die zu verwendende Hintergrundfarbe an.

  • Hintergrundposition: Gibt die Position des Hintergrundbilds an.

  • Hintergrundgröße: Gibt die Größe des Hintergrundbilds an.

  • background-repeat: Gibt an, wie das Hintergrundbild wiederholt werden soll.

  • background-origin: Gibt den Positionierungsbereich des Hintergrundbilds an.

  • background-clip: Gibt den Zeichenbereich des Hintergrunds an.

  • background-attachment: Gibt an, ob das Hintergrundbild fest ist oder mit dem Rest der Seite scrollt.

  • Hintergrundbild: Gibt das zu verwendende Hintergrundbild an.

Beispiel: 

background:url(bgimg.gif) no-repeat 5px 5px;

Wie in der Abbildung unten erklärt:

So fügen Sie ein Hintergrundbild im CSS-Stil ein

Hintergrundbildbeispiel: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图片设置</title>
		<style>
			.demo1{
				width: 400px;
				height: 200px;
				background-color: #fff;
				background-image: url(bg.jpg);
				background-repeat: no-repeat;
				background-size: cover;
			}
			.demo2{
				width: 400px;
				height: 200px;
				background:#fff url(bg.jpg) no-repeat;
				background-size: cover;
			}
		</style>
	</head>
	<body>
		<div class="demo1"></div><br />
		<div class="demo2"></div>
	</body>
</html>

So fügen Sie ein Hintergrundbild im CSS-Stil ein

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung Programmieren! !

Das obige ist der detaillierte Inhalt vonSo fügen Sie ein Hintergrundbild im CSS-Stil ein. 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
Vorheriger Artikel：So definieren Sie Elementlisten-CSSNächster Artikel：So definieren Sie Elementlisten-CSS

In Verbindung stehende Artikel

Mehr sehen