Bagaimana untuk menetapkan mod jubin imej dalam css-tutorial css-php.cn

Bagaimana untuk menetapkan mod jubin imej dalam css

青灯夜游

Lepaskan： 2021-11-10 17:17:22

asal

17008 orang telah melayarinya

Dalam css, anda boleh menggunakan atribut ulangan latar belakang untuk menetapkan kaedah jubin imej Apabila nilai "ulang", latar belakang boleh dijubin sepenuhnya dijubin secara mendatar apabila ia "ulang" -y" boleh dijubin secara menegak, dan "tidak diulang" tidak boleh dijubin (imej hanya akan dipaparkan sekali).

Bagaimana untuk menetapkan mod jubin imej dalam css

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

Dalam css, anda boleh menggunakan atribut ulangan latar belakang untuk menetapkan kaedah jubin imej.

Atribut ulangan latar belakang mentakrifkan mod jubin imej dan menetapkan sama ada dan cara mengulang imej latar belakang.

Atribut ulangan latar belakang boleh menetapkan empat mod jubin:

1 Apabila nilai "ulang", latar belakang boleh dijubin sepenuhnya

repeat: Lalai. Imej latar belakang akan berulang secara menegak dan mendatar.

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 500px;
				height: 500px;
				border: 2px solid red;
				background-image: url(img/nz.png);
				background-repeat:repeat;
			}
		</style>
	</head>
	<body>
		<div ></div>
	</body>
</html>

Salin selepas log masuk

Bagaimana untuk menetapkan mod jubin imej dalam css

2 Apabila nilai ialah "repeat-x", ia boleh dijubin secara mendatar

repeat-x: Hanya kedudukan mendatar akan. ulangi imej latar belakang

div {
	width: 500px;
	height: 500px;
	border: 2px solid red;
	background-image: url(img/nz.png);
	background-repeat:repeat-x;
}

Salin selepas log masuk

Bagaimana untuk menetapkan mod jubin imej dalam css

3 Apabila nilai adalah "repeat-y", ia boleh dijubin secara menegak

repeat-y: Sahaja. kedudukan menegak akan mengulangi imej latar belakang

div {
	width: 500px;
	height: 500px;
	border: 2px solid red;
	background-image: url(img/nz.png);
	background-repeat:repeat-y;
}

Salin selepas log masuk

Bagaimana untuk menetapkan mod jubin imej dalam css

4 Apabila nilai "tidak berulang", ia tidak akan dijubin

tidak -ulang: imej latar belakang hanya akan dipaparkan sekali

div {
	width: 500px;
	height: 500px;
	border: 2px solid red;
	background-image: url(img/nz.png);
	background-repeat:no-repeat;
}

Salin selepas log masuk

Bagaimana untuk menetapkan mod jubin imej dalam css

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk menetapkan mod jubin imej dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!