Quels sont les moyens de répéter l'image d'arrière-plan d'un document Web ?

Les façons de répéter l'image d'arrière-plan d'un document Web sont : 1. Pas de répétition, pas de répétition ; 2. L'image d'arrière-plan se répétera verticalement et horizontalement, répétez, 3. Répétez horizontalement, répétez-x 4. Répétez verticalement ; et horizontalement, répétez- y.

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

Les méthodes de répétition de l'image d'arrière-plan incluent « pas de répétition », « répétition », « répétition horizontale » et « répétition verticale et horizontale ».

Syntaxe

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: no-repeat;

Les plus couramment utilisées sont probablement celles ci-dessus. Jetons un coup d'œil aux deux autres valeurs d'attribut :

background-repeat: space;
background-repeat: round;

Par défaut, les images répétées sont recadrées à la taille de l'élément, mais elles peuvent être mises à l'échelle (en utilisant rond) ou distribué uniformément (en utilisant l'espace).

rond : à mesure que l'espace autorisé augmente, l'image répétée s'étire (sans espaces) jusqu'à ce qu'il y ait suffisamment d'espace pour ajouter une image. Lorsque l'image suivante est ajoutée, toutes les images actuelles seront compressées pour faire de la place.

espace : les images seront répétées autant que possible, mais ne seront pas recadrées. La première et la dernière image seront fixées sur les côtés correspondants de l'élément, et l'espace blanc sera uniformément réparti entre l'arrière-plan des images. L'attribut position est ignoré à moins qu'une seule image ne puisse être affichée sans recadrage. Le seul cas où un recadrage se produira est si l'image est trop grande et qu'il n'y a pas assez d'espace pour afficher l'image entière.

Syntaxe à double valeur

background-repeat: repeat space;
background-repeat: round space;
background-repeat: no-repeat round;

La méthode d'écriture est la même que d'habitude, horizontale verticale |

Apprentissage recommandé : 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!