Wie erstelle ich mehrere Hintergrundfarben für ein einzelnes DIV-Element?

Mehrere Hintergrundfarben auf einem einzelnen DIV

Erzielen einer Farbunterteilung auf einem DIV-Element

Um ein DIV-Element in mehrere Farbabschnitte zu unterteilen, passen Sie die Anzahl der Farbstoppwerte in Ihrem an linearer Farbverlauf. Um beispielsweise zwei Abschnitte zu erstellen, sind drei Farben erforderlich, während für vier Abschnitte vier Farben erforderlich sind. Indem Sie den Prozentsatz angeben, bei dem jeder Farbübergang auftritt, können Sie die gewünschte Farbunterteilung erstellen.

Farbabschnittsgrößen steuern

Um einen Abschnitt kleiner als die zu machen andere verwenden das CSS-Pseudoelement :after. Dieses Element erstellt eine Überlagerung, deren Größe und Position unabhängig voneinander angepasst werden kann. Das Anwenden einer kontrastierenden Hintergrundfarbe auf das :after-Element erzeugt die Illusion eines kleineren Farbabschnitts, ohne das DIV physisch zu unterteilen.

Hier sind verbesserte Beispiele mit besserer browserübergreifender Unterstützung:

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

B. Drei Farbabschnitte

.three-colors {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 33%,
    #f6f6f6 33%,
    #f6f6f6 66%,
    #33ccff 66%,
    #33ccff 100%
  );
}

C. Kleinerer blauer Abschnitt

.smaller-blue {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 50%,
    #33ccff 50%,
    #33ccff 100%
  );
  position: relative;
}

.smaller-blue:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25%;
  height: 20%;
  background-color: white;
}

Diese Beispiele zeigen, wie man mehrere Hintergrundfarben auf einem einzelnen DIV-Element erzielt und ihre Größen mithilfe des Pseudoelements :after steuert, was eine vielseitige Möglichkeit zum Entwerfen komplexer Farben bietet Muster ohne die Notwendigkeit zusätzlicher HTML-Elemente.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mehrere Hintergrundfarben für ein einzelnes DIV-Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!