Wie wende ich mithilfe von CSS-Verläufen mehrere Hintergrundfarben auf ein einzelnes Div an?

Anwenden mehrerer Hintergrundfarben auf ein einzelnes Div

Um mehrere Hintergrundfarben innerhalb eines einzelnen Divs zu erreichen, stellt CSS die Hintergrundeigenschaft bereit, die linear unterstützt Farbverläufe. So können Sie die von Ihnen beschriebenen Szenarios implementieren:

Szenario 1: Erstellen eines Div mit geteilter Farbe (A)

So erstellen Sie ein Div mit geteiltem Hintergrund (Ähnlich wie „A“ in Ihrem Bild) verwenden Sie einen linearen Farbverlauf mit vier Farbstopps:

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

Szenario 2: Eine Portion kleiner machen als die andere (C)

Im „C“-Szenario möchten Sie den blauen Teil in der Höhe verkleinern. Dies kann durch die Verwendung des :after-Pseudoelements zusammen mit einem weißen Hintergrund erreicht werden:

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

Hinweis: Für eine bessere browserübergreifende Kompatibilität sollten Sie die Verwendung von Herstellerpräfixen für die Hintergrundeigenschaft in Betracht ziehen wie in den bereitgestellten Codeschnipseln zu sehen.

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