Comment appliquer plusieurs couleurs d'arrière-plan à un seul div ?

Application de plusieurs couleurs d'arrière-plan à un seul div

Dans certaines situations, l'application de plusieurs couleurs d'arrière-plan à un seul div peut être utile. Cela élimine le besoin de divs ou d'images d'arrière-plan supplémentaires, ce qui en fait une tâche visuellement attrayante et simple.

Scénario 1 : Réalisation d'une division bicolore uniforme

Pour créer une simple division bicolore ressemblant à "A" dans l'image fournie, vous pouvez utiliser un dégradé linéaire comme suit :

div.A {
  background: linear-gradient(to right, #9c9e9f, #f6f6f6);
}

Cette approche, cependant, peut entraîner un dégradé sans la transition de couleur nette comme on le voit dans « A ». Pour remédier à cela, utilisez un dégradé à quatre positions, en attribuant à la première couleur (gris foncé) de 0% à 50%, et à la deuxième couleur (gris clair) de 50% à 100%.

div.A {
  background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);
}

Scénario 2 : Contrôler la taille de plusieurs couleurs d'arrière-plan

Pour créer une section plus petite au sein d'une division, comme la section bleue en "C", vous pouvez utiliser un dégradé linéaire similaire avec quatre positions, mais ajoutez un sélecteur :after avec un fond blanc pour simuler une seconde section plus petite.

div.C {
  background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);
}

div.C:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 20%;
  background-color: white;
}

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!