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

Plusieurs couleurs d'arrière-plan pour un seul div

Dans certains scénarios, l'application de plusieurs couleurs d'arrière-plan à un div est avantageuse par rapport à l'utilisation d'images d'arrière-plan ou d'images supplémentaires. divisions. CSS propose différentes manières d'obtenir cet effet.

1. Dégradé linéaire pour deux couleurs ou plus :

Pour créer un "A" avec deux couleurs, comme illustré dans l'image, utilisez un dégradé linéaire à quatre positions :

background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);

2. Création d'une partie plus petite pour "C" :

Pour "C", utilisez un dégradé linéaire similaire à "A", mais ajoutez un sélecteur :after avec un fond blanc pour simuler une partie bleue plus petite :

background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%);
.c:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 20%;
    background-color: white;
}

Alternative améliorée pour "C" :

La solution précédente crée un effet de chevauchement avec la partie blanche. Une meilleure alternative consiste à utiliser la propriété 'background-clip', qui vous permet de découper l'arrière-plan selon la forme spécifiée :

background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%);
background-clip: border-box;

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!