La propriété de répétition d'arrière-plan contrôle si une image d'arrière-plan est répétée (carrelée), et si elle est répétée, la propriété définit le long des axes spécifiés (x, y ou les deux), l'image doit être répétée.
Par défaut, une image d'arrière-plan est répétée le long des axes verticaux et horizontaux, et est répété dans les deux directions. Nous utilisons la propriété de répétition d'arrière-plan pour spécifier l'axe le long de laquelle une image doit être répétée.
Lorsqu'une image d'arrière-plan est répétée, elle est d'abord placée en fonction de la propriété de position d'arrière-plan, puis commence à se répéter à partir de ce point dans les deux directions. Par exemple, une image en arrière-plan qui est placée à une position d'arrière-plan du centre central (le centre de l'élément), et qui a une valeur de répétition de répétition d'arrière-plan, se répétera dans les deux directions le long des axes x et y - c'est-à-dire de haut en bas, à gauche et à droite, à partir du centre.
L'arrière-plan d'un élément est la zone couverte par la largeur et la hauteur de cet élément (que ces dimensions soient définies explicitement, ou que le contenu les dicte); Il comprend également la zone couverte par le rembourrage et les frontières. Une couleur d'arrière-plan (ou l'image d'arrière-plan) appliquée à un élément apparaîtra sous le contenu de premier plan de cet élément, et la zone couverte par le rembourrage et les propriétés de la frontière pour l'élément. Cette zone de couverture est évidente lorsqu'un élément a des bordures transparentes (ou en pointillés ou en pointillés), et l'arrière-plan est vu sous les bordures (ou entre les points). Notez que les versions Internet Explorer jusqu'à et incluant 6 ne prennent pas en charge les frontières transparentes.
Une zone de l'élément en question doit être visible si l'image d'arrière-plan doit se manifester. Si l'élément n'a pas de hauteur intrinsèque (soit définie par son contenu, soit par ses dimensions), l'arrière-plan ne sera pas visible. Si un élément ne contient que des enfants flottants qui n'ont pas été effacés - voyez clairement - aucun arrière-plan ne sera affiché, car la hauteur de l'élément sera nulle.
Le carrelage et le positionnement de l'image d'arrière-plan sur les éléments en ligne ne sont pas définis dans la spécification CSS2.1, mais il pourrait être abordé dans les futures versions.
Cette règle de style provoque une image en arrière-plan attribuée à l'élément avec ID "Exemple" à répéter le long de l'axe x :
#example{
background-repeat: repeat-x;
}La répétition de valeur garantit que l'image d'arrière-plan est répétée dans les deux directions (c'est-à-dire à gauche et à droite, et de haut en bas), et le long des deux axes, jusqu'à ce que l'arrière-plan de l'élément soit entièrement couvert.
La valeur répétée-x garantit que l'image d'arrière-plan est répétée uniquement le long de l'axe x (c'est-à-dire l'axe horizontal dans les deux directions - gauche et à droite) jusqu'à ce que l'arrière-plan de l'élément soit entièrement couvert le long de cet axe.
La valeur répétée-y garantit que l'image d'arrière-plan est répétée uniquement le long de l'axe y (c'est-à-dire l'axe vertical dans les deux directions - en haut et en bas) jusqu'à ce que l'arrière-plan de l'élément soit entièrement couvert le long de cet axe.
La valeur sans répétition garantit que l'image d'arrière-plan n'est répétée dans aucune direction, et qu'une seule instance de l'image sera placée aux coordonnées spécifiées par la position d'arrière-plan.
Si aucune position d'arrière-plan n'a été spécifiée, L'image est placée à la position gauche par défaut de l'élément (0,0).
Les valeurs «répéter-x» et «répéter-y» dans la propriété CSS Background-Repeat sont utilisées pour contrôler la répétition de l'image d'arrière-plan horizontalement et verticalement. Lorsque «Repeat-X» est utilisé, l'image d'arrière-plan est répétée uniquement horizontalement, créant un motif continu de gauche à droite. D'un autre côté, lorsque la «répétition» est utilisée, l'image d'arrière-plan est répétée uniquement verticalement, créant un motif continu de haut en bas. Ces propriétés sont utiles lorsque vous souhaitez contrôler la direction de la répétition de l'image d'arrière-plan.
La valeur de «non-répétition» dans la propriété CSS Background-Repeat est utilisée lorsque vous voulez que l'image de fond n'apparaît qu'une autre fois. Lorsque cette valeur est définie, l'image d'arrière-plan sera placée à la position spécifiée par la propriété de position d'arrière-plan et ne répétera pas ou ne se répète pas. Ceci est particulièrement utile lorsque vous avez une seule image que vous souhaitez utiliser comme arrière-plan sans aucune répétition.
Oui, vous pouvez utiliser plusieurs valeurs dans la propriété CSS Background-Repeat. Ceci est particulièrement utile lorsque vous travaillez avec plusieurs images d'arrière-plan. Vous pouvez spécifier une valeur de répétition différente pour chaque image d'arrière-plan en séparant chaque valeur avec une virgule. La première valeur correspond à la première image d'arrière-plan, la deuxième valeur à la deuxième image, etc.
La valeur «Space» dans la propriété CSS Background-Repeat est utilisée pour carreler l'image d'arrière-plan dans les deux sens. Les images sont uniformément espacées et les premières et dernières images touchent le bord de l'élément. Si l'espace disponible ne suffit pas pour une autre image, les images sont redimensionnées pour s'adapter. Cela peut être utile lorsque vous souhaitez maintenir un espace cohérent entre chaque répétition de l'image d'arrière-plan.
La valeur «ronde» dans la propriété CSS Background-Repeat est utilisée pour répéter l'image de fond autant que possible sans coupure. L'image est redimensionnée afin qu'elle puisse être répétée un nombre entier de fois dans l'élément. Cela peut être utile lorsque vous souhaitez vous assurer que l'image d'arrière-plan entière est visible sans aucune coupure.
La valeur «Hériter» dans la propriété CSS Background-Repeat-Repeat est utilisée pour faire l'héritage de l'élément de la propriété de réception d'arrière-plan de l'élément parent. Cela signifie que la valeur de répétition de l'image d'arrière-plan de l'élément sera la même que celle de son élément parent.
Oui, vous pouvez utiliser la propriété de répétition d'arrière-plan CSS avec des gradients. Lorsqu'il est utilisé avec un gradient, la propriété de répétition d'arrière-plan répétera le motif de gradient en fonction de la valeur spécifiée. Cela peut être utile lorsque vous souhaitez créer un effet de gradient répétitif.
La valeur «initiale» dans la propriété CSS Background-Repeat est utilisée pour définir la propriété sur sa valeur par défaut. Cela signifie que l'image d'arrière-plan répétera à la fois horizontalement et verticalement, ce qui est le comportement par défaut de la propriété de répétition d'arrière-plan.
Si vous ne spécifiez pas une valeur pour la propriété de répétition de l'arrière-plan CSS, la valeur par défaut est "Répéter". Cela signifie que l'image d'arrière-plan répétera à la fois horizontalement et verticalement.
Oui, vous pouvez contrôler la répétition de l'image d'arrière-plan dans une seule direction. Vous pouvez utiliser la valeur «répéter-x» pour répéter l'image horizontalement, ou la valeur «répéter-y» pour répéter l'image verticalement. Cela peut être utile lorsque vous souhaitez créer un motif horizontal ou vertical avec l'image d'arrière-plan.
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!
Quelle est la différence entre golang et python
Quelle est la priorité de l'interruption ?
diablotin oracle
Comment illuminer le moment des amis proches de Douyin
Comment définir les numéros de page dans Word
Utilisation de #include en langage C
Utilisation de la commande source sous Linux
Le rôle du routeur
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
