Bagaimana untuk menukar saiz imej latar belakang dalam css-tutorial css-php.cn

Bagaimana untuk menukar saiz imej latar belakang dalam css

青灯夜游

Lepaskan： 2021-11-10 17:05:51

asal

30277 orang telah melayarinya

Dalam CSS, anda boleh menukar saiz imej latar belakang dengan menetapkan gaya atribut saiz latar belakang untuk imej latar belakang Fungsi atribut ini adalah untuk menentukan saiz imej latar belakang -saiz: nilai lebar nilai ketinggian;

Bagaimana untuk menukar saiz imej latar belakang dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Dalam CSS, anda boleh menukar saiz imej latar belakang dengan menetapkan gaya atribut saiz latar belakang kepada imej latar belakang.

Atribut saiz latar belakang menentukan saiz imej latar belakang.

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

panjang Tetapkan ketinggian dan lebar imej latar belakang. Nilai pertama menetapkan lebar, dan nilai kedua menetapkan ketinggian. Jika hanya satu nilai diberikan, yang kedua ditetapkan kepada auto (automatik)
peratusan akan mengira peratusan kawasan kedudukan berbanding latar belakang. Nilai pertama menetapkan lebar, dan nilai kedua menetapkan ketinggian. Jika hanya satu nilai diberikan, nilai kedua ditetapkan kepada "auto"
penutup yang akan mengekalkan nisbah bidang imej dan menskalakan imej untuk menutup sepenuhnya kedudukan latar belakang Minimum saiz wilayah.
mengandungi akan mengekalkan nisbah bidang imej dan menskalakan imej kepada saiz maksimum yang sesuai dalam kawasan kedudukan latar belakang.

Contoh:

<!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>

Salin selepas log masuk

Bagaimana untuk menukar saiz imej latar belakang dalam css

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk menukar saiz imej latar belakang dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!