Comment utiliser CSS pour empêcher la répétition des images d'arrière-plan-tutoriel CSS-php.cn

Comment utiliser CSS pour empêcher la répétition des images d'arrière-plan

青灯夜游

Libérer： 2023-01-05 16:12:59

original

13754 Les gens l'ont consulté

L'attribut background-repeat peut être utilisé en CSS pour empêcher la répétition de l'image d'arrière-plan. Ajoutez simplement le style "background-repeat:no-repeat;" à l'élément ; est répété et comment Répéter, défini pour ne pas répéter lorsque la valeur est « pas de répétition ».

Comment utiliser CSS pour empêcher la répétition des images d'arrière-plan

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

En CSS, nous pouvons utiliser l'attribut background pour définir l'image d'arrière-plan, comme le code suivant

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			body {
				background: url("img/1.jpg");
			}
		</style>
	</head>

	<body>
	</body>

</html>

Copier après la connexion

En exécutant le code, nous avons constaté que l'image d'arrière-plan est répétée que ce soit horizontalement ou verticalement, jusqu'à ce que il est pavé et remplit toute la zone d'affichage.

Comment utiliser CSS pour empêcher la répétition des images darrière-plan

Alors, comment empêcher l'image d'arrière-plan de se répéter ? Vous pouvez utiliser l'attribut background-repeat.

L'attribut background-repeat peut définir si et comment l'image d'arrière-plan est répétée. Sa valeur par défaut est de se répéter horizontalement et verticalement.

Il a quatre valeurs qui peuvent être définies, comme suit :

répéter : Par défaut. L'image d'arrière-plan se répétera verticalement et horizontalement.
repeat-x : L'image d'arrière-plan se répétera horizontalement.
répéter-y : L'image d'arrière-plan se répétera verticalement.
no-repeat : L'image de fond ne sera affichée qu'une seule fois.

On peut voir que lorsque la valeur de cet attribut est "no-repeat", l'image d'arrière-plan peut être rendue non répétée

image d'arrière-plan CSS non répété

body{
    background: url("img/1.jpg");
    background-repeat:no-repeat;
}

Copier après la connexion

Le résultat de l'exécution est celui indiqué ci-dessous. L'image d'arrière-plan ne sera pas répétée horizontalement ou verticalement. Un seul

Comment utiliser CSS pour empêcher la répétition des images darrière-plan

le sera. affiché (partage vidéo d'apprentissage : tutoriel vidéo 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!