Wie wende ich mehrere Hintergrundfarben auf ein einzelnes Div an?

Anwenden mehrerer Hintergrundfarben auf ein einzelnes Div

In bestimmten Situationen kann das Anwenden mehrerer Hintergrundfarben auf ein einzelnes Div nützlich sein. Dadurch entfällt die Notwendigkeit zusätzlicher Divs oder Hintergrundbilder, was es zu einer optisch ansprechenden und unkomplizierten Aufgabe macht.

Szenario 1: Erreichen einer einheitlichen zweifarbigen Unterteilung

Zu erstellen Eine einfache zweifarbige Unterteilung, die dem „A“ im bereitgestellten Bild ähnelt, können Sie als linearen Farbverlauf verwenden folgt:

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

Dieser Ansatz kann jedoch zu einem Farbverlauf ohne den scharfen Farbübergang führen, wie in „A“ zu sehen ist. Um dies zu korrigieren, verwenden Sie einen Farbverlauf mit vier Positionen und weisen Sie der ersten Farbe (Dunkelgrau) einen Wert von 0 % bis 50 % und der zweiten Farbe (Hellgrau) einen Wert von 50 % bis 100 % zu.

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

Szenario 2: Steuern der Größe mehrerer Hintergrundfarben

Um einen kleineren Abschnitt innerhalb einer Unterteilung zu erstellen, wie den blauen Abschnitt In „C“ können Sie einen ähnlichen linearen Farbverlauf mit vier Positionen verwenden, aber einen :after-Selektor mit weißem Hintergrund hinzufügen, um einen kleineren zweiten Abschnitt zu simulieren.

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

Das obige ist der detaillierte Inhalt vonWie wende ich mehrere Hintergrundfarben auf ein einzelnes Div an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!