Heim  >  Artikel  >  Web-Frontend  >  So ändern Sie die Größe des Hintergrundbilds in CSS

So ändern Sie die Größe des Hintergrundbilds in CSS

青灯夜游
青灯夜游Original
2021-11-10 17:05:5130261Durchsuche

In CSS können Sie die Größe des Hintergrundbilds ändern, indem Sie den Attributstil „Hintergrundgröße“ für das Hintergrundbild festlegen. Die Funktion dieses Attributs besteht darin, die Größe des Hintergrundbilds anzugeben. Die Syntax lautet „Hintergrundgröße:“. Breitenwert Höhenwert;".

So ändern Sie die Größe des Hintergrundbilds in CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS können Sie die Größe des Hintergrundbilds ändern, indem Sie den Attributstil „Hintergrundgröße“ auf das Hintergrundbild festlegen.

Das Attribut „Hintergrundgröße“ gibt die Größe des Hintergrundbilds an.

Syntax: background-size: length|percentage|cover|contain;

  • Länge Legt die Höhe und Breite des Hintergrundbilds fest. Der erste Wert legt die Breite fest und der zweite Wert legt die Höhe fest. Wenn nur ein Wert angegeben wird, wird der zweite auf „Auto“ gesetzt und

  • percentage berechnet den Prozentsatz des Positionierungsbereichs relativ zum Hintergrund. Der erste Wert legt die Breite fest und der zweite Wert legt die Höhe fest. Wenn nur ein Wert angegeben wird, wird der zweite auf „auto“

  • cover gesetzt, wodurch das Seitenverhältnis des Bildes beibehalten und das Bild auf die kleinste Größe skaliert wird, die den Hintergrundpositionierungsbereich vollständig abdeckt.

  • enthalten Dadurch wird das Seitenverhältnis des Bildes beibehalten und das Bild auf die maximale Größe skaliert, die in den Hintergrundpositionierungsbereich passt.

Beispiel:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			div{
				width: 400px;
				height: 224px;
			}
			.box1{
				background:url(img/2.jpg) no-repeat;
			}
			.box2{
				background:url(img/2.jpg) no-repeat;
				background-size: 200px 160px;
				
			}
		</style>
	</head>

	<body>
		<p><strong>原始图片大小</strong></p> 
		
		<div class="box1"></div> 
		<p>本身这个图片宽度为400px,高度224px</p>
		<br />
		<p><strong>通过CSS background-size修改后的背景图片</strong></p> 
		<div class="box2"></div>
	</body>

</html>

So ändern Sie die Größe des Hintergrundbilds in CSS

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Größe des Hintergrundbilds in CSS. 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