Comment définir le mode de mosaïque d'images en CSS-tutoriel CSS-php.cn

Comment définir le mode de mosaïque d'images en CSS

青灯夜游

Libérer： 2021-11-10 17:17:22

original

17025 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut background-repeat pour définir la méthode de mosaïque de l'image. Lorsque la valeur est "repeat", l'arrière-plan peut être complètement carrelé. Lorsqu'il est "repeat-x", il peut être carrelé horizontalement. Lorsqu'il est « répétition » peut être carrelé verticalement, « no-repeat » ne sera pas carrelé (l'image ne sera affichée qu'une seule fois).

Comment définir le mode de mosaïque d'images en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, vous pouvez utiliser l'attribut background-repeat pour définir la méthode de mosaïque d'images.

L'attribut background-repeat définit le mode de mosaïque de l'image et définit si et comment répéter l'image d'arrière-plan.

L'attribut background-repeat peut définir quatre modes de mosaïque :

1 Lorsque la valeur est "repeat", l'arrière-plan peut être complètement carrelé

repeat : Par défaut. L'image d'arrière-plan se répétera verticalement et horizontalement.

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

Copier après la connexion

Comment définir le mode de mosaïque dimages en CSS

2. Lorsque la valeur est "repeat-x", elle peut être carrelée horizontalement.

repeat-x : Seule la position horizontale répétera l'image d'arrière-plan. la valeur est "repeat-y", elle peut être carrelée horizontalement. Mosaïque verticale

repeat-y : Seule la position verticale répétera l'image d'arrière-plan Comment définir le mode de mosaïque dimages en CSS

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

Copier après la connexion

4. ne sera pas carrelé

no-repeat : L'image d'arrière-plan ne sera affichée qu'une seule fois Comment définir le mode de mosaïque dimages en CSS

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

Copier après la connexion

(Partage vidéo d'apprentissage :

Tutoriel vidéo CSS

) Comment définir le mode de mosaïque dimages en CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!