Comment obtenir plusieurs couleurs d'arrière-plan dans une seule division avec CSS ?

Obtention de plusieurs couleurs d'arrière-plan dans un seul div

En CSS, l'application de plusieurs couleurs d'arrière-plan à un seul div peut être obtenue grâce à diverses techniques. Explorons quelques options avec différents scénarios.

Scénario 1 : Div avec deux portions égales

Pour créer un div avec deux portions égales, chacune avec une couleur différente, linéaire des dégradés peuvent être utilisés. Par exemple, pour obtenir l'effet affiché dans "A" de votre image, vous pouvez utiliser le CSS suivant :

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

Ce dégradé utilise quatre positions pour spécifier la transition de couleur. Les première et deuxième positions définissent la couleur gris foncé de 0% à 50%, et les troisième et quatrième positions définissent la couleur gris clair de 50% à 100%.

Scénario 2 : Div avec Inégalité Portions

Pour créer un div avec des portions de différentes hauteurs, vous pouvez combiner des dégradés linéaires avec des pseudo-éléments. Par exemple, pour obtenir l'effet montré en "C" de votre image, où la partie bleue est plus petite en hauteur que l'autre partie, utilisez le CSS suivant :

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;
}

Dans ce scénario, un pseudo- L'élément (:after) est ajouté au div. Cet élément agit comme la « plus petite » partie bleue. Il est positionné absolument dans le coin inférieur droit du div, avec une largeur de 50 % et une hauteur de 20 %. La couleur d'arrière-plan est définie sur blanc, qui recouvre la partie bleue pour obtenir l'effet souhaité.

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!