Comment utiliser CSS pour rendre l'image d'arrière-plan non répétitive

Dans la conception Web, l'utilisation d'images d'arrière-plan peut embellir la page, stimuler le rythme d'écriture, créer l'atmosphère de la page Web, etc. Cependant, les motifs de certaines images d'arrière-plan sont petits et apparaîtront répétés lorsqu'ils seront carrelés, ce qui affectera l'apparence et l'expérience de lecture. Cet article explique comment utiliser CSS pour obtenir l'effet d'images d'arrière-plan non répétitives.

1. Utilisez l'attribut background-size background size

Utilisez l'attribut background-size pour modifier la taille de l'image d'arrière-plan afin qu'elle corresponde à la taille de l'élément actuel. Lorsque l’image d’arrière-plan est en mosaïque, cet attribut peut également aider à obtenir l’effet d’images d’arrière-plan non répétitives.

Nous pouvons définir la valeur de l'attribut background-size sur "auto 100%". De cette façon, le CSS mosaïquera l'image d'arrière-plan horizontalement au lieu de la répéter verticalement. Par exemple :

div{
  background-image: url(bg.jpg);
  background-repeat: repeat-x;
  background-size: auto 100%;
}

Dans cet exemple, l'image d'arrière-plan de l'élément div sera carrelée horizontalement sans se répéter verticalement.

2. Utilisez l'attribut background-attachment background attachment

Une autre façon d'obtenir des images d'arrière-plan non dupliquées consiste à utiliser l'attribut background-attachment. Cette propriété spécifie si l'image d'arrière-plan est positionnée par rapport à la fenêtre ou à l'élément conteneur.

Nous définissons la valeur de l'attribut background-attachment sur fixe. De cette façon, le CSS corrigera l'image d'arrière-plan dans la fenêtre, afin que l'image d'arrière-plan ne bouge pas lorsque l'utilisateur fait défiler la page. Par exemple :

div{
  background-image: url(bg.jpg);
  background-repeat: repeat;
  background-attachment: fixed;
}

Dans cet exemple, l'image d'arrière-plan de l'élément div défilera avec la page, plutôt que de se déplacer par rapport à l'élément div sur lequel elle est affichée. Cela garantit que l'image d'arrière-plan n'est pas répétée.

3. Utilisez l'attribut background-origin background origin

Si vous souhaitez limiter l'image d'arrière-plan à un certain bord de l'élément au lieu de l'élément entier, vous pouvez utiliser l'attribut background-origin. Par exemple, disons que vous souhaitez contraindre une image d'arrière-plan au coin supérieur gauche d'un conteneur, vous pouvez utiliser le CSS suivant :

div{
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-origin: border-box;
  padding: 50px;
}

Dans cet exemple, l'image d'arrière-plan de l'élément div n'apparaîtra que dans la zone marginale de ​​la zone du conteneur (c'est-à-dire à 50 pixels de la bordure)) sans dépasser les limites de la bordure.

Pour résumer, l'utilisation des trois propriétés CSS ci-dessus peut facilement obtenir l'effet d'images d'arrière-plan non répétitives. Que vous souhaitiez obtenir une beauté visuelle ou améliorer l'expérience de lecture de l'utilisateur, obtenir cet effet est très important.

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!