Wie erreicht man mit CSS mehrere Hintergrundfarben in einem einzigen Div?

Mehrere Hintergrundfarben für ein einzelnes Div

In bestimmten Szenarien ist das Anwenden mehrerer Hintergrundfarben auf ein Div vorteilhafter als die Verwendung von Hintergrundbildern oder zusätzlichen divs. CSS bietet verschiedene Möglichkeiten, diesen Effekt zu erzielen.

1. Linearer Farbverlauf für zwei oder mehr Farben:

Um „A“ mit zwei Farben zu erstellen, wie im Bild dargestellt, verwenden Sie einen linearen Farbverlauf mit vier Positionen:

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

2. Erstellen eines kleineren Teils für „C“:

Verwenden Sie für „C“ einen linearen Farbverlauf ähnlich wie „A“, fügen Sie jedoch einen :after-Selektor mit weißem Hintergrund hinzu, um einen kleineren blauen Teil zu simulieren:

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

Verbesserte Alternative für „C“:

Die vorherige Lösung erzeugt einen Überlappungseffekt mit dem Weiß Portion. Eine bessere Alternative ist die Verwendung der Eigenschaft „background-clip“, mit der Sie den Hintergrund auf die angegebene Form zuschneiden können:

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

Das obige ist der detaillierte Inhalt vonWie erreicht man mit CSS mehrere Hintergrundfarben in einem einzigen Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!