Comment définir l'arrière-plan pour qu'il ne se répète pas en CSS

Dans la conception Web, les images d'arrière-plan sont un élément très important qui peut rendre les pages Web plus belles. Cependant, si votre image d’arrière-plan apparaît plusieurs fois de suite sur une page Web, la page peut paraître extrêmement répétitive et monotone. Par conséquent, lorsque nous utilisons des images d’arrière-plan, nous devons faire attention à la manière d’éviter qu’elles ne se reproduisent sur la page Web.

L'un des moyens les plus simples consiste à utiliser la propriété background-repeat en CSS. Cette propriété contrôle la manière dont l'image d'arrière-plan est répétée dans la page Web. background-repeat a quatre valeurs disponibles : répétition (par défaut), répétition-x, répétition-y et non-répétition. Parmi eux, répéter signifie que l'image d'arrière-plan se répète dans les directions horizontale et verticale ; répéter-x signifie que l'image d'arrière-plan se répète uniquement dans le sens horizontal, pas dans le sens vertical ; répéter-y signifie que l'image d'arrière-plan se répète uniquement dans le sens vertical ; la direction verticale. Elle n’apparaît pas dans la direction horizontale ; aucune répétition signifie que l’image d’arrière-plan n’apparaît pas de manière répétée.

Par exemple, pour empêcher l'image d'arrière-plan de se répéter horizontalement et verticalement, vous pouvez utiliser le code suivant :

background-repeat: no-repeat;

Mais cette méthode a une limitation : si votre image d'arrière-plan est trop petite pour remplir toute la page Web, alors ceci La méthode entraînera l'affichage d'une petite partie seulement de l'image d'arrière-plan sur la page Web et laissera beaucoup d'espace vide sur la page Web. Afin de résoudre ce problème, nous devons utiliser l'attribut de positionnement d'arrière-plan - background-position.

L'attribut background-position peut nous aider à placer l'image d'arrière-plan n'importe où sur la page Web. Il accepte deux valeurs, la première valeur est la position horizontale et la deuxième valeur est la position verticale. Par exemple, si vous souhaitez que l'image de fond soit affichée dans le coin supérieur gauche, vous pouvez écrire comme ceci :

background-position: left top;

Si vous souhaitez que l'image de fond soit affichée dans le coin inférieur droit, vous pouvez écrire comme ceci :

background-position: right bottom;

Si vous souhaitez que l'image d'arrière-plan remplisse toute la page Web, vous pouvez écrire comme ceci :

background-position: center center;

Certains concepteurs de sites Web utiliseront une méthode plus complexe pour empêcher l'image d'arrière-plan de se répéter, c'est-à-dire via l'implémentation multiple de CSS3 en arrière-plan. . Plusieurs arrière-plans vous permettent d'utiliser plusieurs images d'arrière-plan sur le même élément pour obtenir un effet de type « arrière-plans non répétitifs ».

Pour utiliser plusieurs arrière-plans, vous devez utiliser l'attribut background-image de CSS3. Il accepte un ensemble d'images d'arrière-plan séparées par des virgules. Par exemple, voici un arrière-plan composé de trois images :

background-image: url("image1.jpg"), url("image2.jpg"), url("image3.jpg");

Ici, nous pouvons contrôler la position de chaque image d'arrière-plan afin qu'elles n'apparaissent pas à plusieurs reprises. Par exemple, le code suivant peut faire en sorte que trois images d'arrière-plan couvrent la totalité de la page Web à partir de différentes positions sans se répéter :

background-image: url("image1.jpg"), url("image2.jpg"), url("image3.jpg");
background-position: left top, center center, right bottom;
background-repeat: no-repeat;

En utilisant plusieurs arrière-plans, nous pouvons obtenir des conceptions d'arrière-plan plus complexes, rendant la page Web plus superposée et tridimensionnelle. sentir.

En bref, la façon d'empêcher la récurrence de l'image d'arrière-plan dépend de la capacité du concepteur Web à utiliser habilement divers attributs CSS. Nous pouvons utiliser des attributs simples de répétition d'arrière-plan, des attributs de positionnement d'arrière-plan et des méthodes multi-arrière-plans plus complexes pour donner à l'image d'arrière-plan le meilleur effet sur la page Web, améliorant ainsi la beauté et l'expérience utilisateur de la page Web.

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!