Comment appliquer plusieurs couleurs d'arrière-plan à un seul div à l'aide de dégradés CSS ?

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

Pour obtenir plusieurs couleurs d'arrière-plan au sein d'un seul div, CSS fournit la propriété d'arrière-plan qui prend en charge les lignes linéaires. dégradés. Voici comment mettre en œuvre les scénarios que vous avez décrits :

Scénario 1 : Création d'un div à couleur divisée (A)

Pour créer un div avec un arrière-plan divisé (similaire au « A » dans votre image), utilisez un dégradé linéaire avec quatre arrêts de couleur :

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

Scénario 2 : Rendre une partie plus petite que l'autre (C)

Dans le scénario « C », vous souhaitez réduire la hauteur de la partie bleue. Ceci peut être réalisé en utilisant le pseudo-élément :after avec un fond blanc :

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%; /* Adjust this value to control the height of the blue portion */
  background-color: white;
}

Remarque : Pour une meilleure compatibilité entre navigateurs, envisagez d'utiliser les préfixes du fournisseur pour la propriété background comme le montrent les extraits de code fournis.

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!