Comment définir le mode de mosaïque de l'image d'arrière-plan en CSS

L'attribut background-repeat peut être utilisé en CSS pour définir la méthode de mosaïque de l'image d'arrière-plan. Lorsque la valeur est "repeat", elle peut être répétée dans les directions verticale et horizontale. Lorsqu'elle est "repeat-x", il peut être répété dans le sens horizontal. Lorsqu'il est « répéter », -y » peut être répété dans le sens vertical, et « non-répétition » ne sera pas répété.

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

Par défaut, si une image de fond ne suffit pas à remplir tout le conteneur, elle sera répétée horizontalement et verticalement pour remplir tout le conteneur. Cependant, vous souhaitez parfois que l'image d'arrière-plan n'apparaisse qu'une seule fois ou qu'elle se répète uniquement dans une certaine direction.

À ce stade, vous pouvez utiliser l'attribut background-repeat pour définir la façon dont l'image d'arrière-plan est répétée, c'est-à-dire la méthode de mosaïque de l'image d'arrière-plan. Les valeurs facultatives sont répéter | espace | rond | pas de répétition, la valeur par défaut est répéter. Les significations des différentes valeurs​​sont présentées dans le tableau ci-dessous :

.

Par défaut, la zone de remplissage de l'image d'arrière-plan est la zone de remplissage de l'élément, et une fois l'image d'arrière-plan carrelée, sa zone de remplissage sera la zone de bordure de l'élément.

L'attribut background-repeat nécessite 2 paramètres Si 2 paramètres sont fournis, le premier est utilisé pour la direction horizontale et le second est utilisé pour la direction verticale. Si un seul argument est fourni, il est utilisé pour les directions horizontale et verticale. À l'exception des valeurs spéciales répéter-x et répéter-y, car répéter-x est équivalent à répéter sans répétition, répéter-y est équivalent à répétition sans répétition, c'est-à-dire répéter-x et répéter-y sont équivalents pour fournir 2 valeurs de paramètres.

Afin de comprendre clairement les performances de l'attribut background-repeat sous différentes valeurs, une classe est définie pour chaque valeur puis appliquée à un conteneur respectivement.

Le code HTML est le suivant :

<div class="no-repeat"></div>
<div class="repeat-x"></div>
<div class="repeat-y"></div>
<div class="repeat"></div>
<div class="space"></div>
<div class="round"></div>
————————————————
版权声明：本文为CSDN博主「ixygj197875」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ixygj197875/article/details/79333143

Le code CSS est le suivant :

div { 
 width: 100px; 
 height: 120px;
 border: 1px dashed #888;
 background-image: url(bg.png);
}
.repeat-x {
 background-repeat: repeat-x;
}
.repeat-y {
 background-repeat: repeat-y;
}
.repeat {
 background-repeat: repeat;
}
.space {
 background-repeat: space;
}
.round {
 background-repeat: round;
}
.no-repeat {
 background-repeat: no-repeat;
}

Dans le code ci-dessus, la largeur et la hauteur du conteneur sont de 100 px et 120 px, et la largeur et la hauteur de l'image d'arrière-plan sont toutes deux de 40 px. Afin de voir clairement la portée de l'image d'arrière-plan, un cadre en pointillés de 1 px est ajouté au conteneur et une bordure noire de 1 px est ajoutée à l'image d'arrière-plan. Le résultat de l'exécution est présenté dans la figure 4-27 :

rendu d'attribut de répétition d'arrière-plan

Comme le montre la figure ci-dessus, les images sont répétées en fonction de la taille d'origine pour remplir le conteneur. Dans le sens horizontal, lorsque la largeur du conteneur n'est pas un multiple entier de la largeur de l'image de fond : si la valeur est espace, l'espace excédentaire est rempli de blancs ; si la valeur est ronde, l'image de fond sera mise à l'échelle ; ; s'il s'agit d'autres valeurs, la dernière image Image peut être incomplète. Il en va de même pour la direction verticale.

Recommandations associées : "Tutoriel vidéo CSS"

La valeur et la signification de l'attribut background-repeat

Valeur de l'attribut	signification
repeat	Valeur par défaut, l'image est dans les directions horizontale et verticale Répétez pour remplir le conteneur
répétez-x	L'image se répète uniquement dans le sens horizontal pour remplir le conteneur
répétez-y	L'image se répète uniquement dans la direction verticale pour remplir le conteneur
espace	L'image est alignée et répétée aux deux extrémités pour remplir le conteneur. L'espace excédentaire est remplacé par un espace vide
rond	L'image est alignée et répétée à. les deux extrémités pour remplir le récipient. L'espace excédentaire est rempli en étirant l'image

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!