Wie erreicht man mit CSS mehrere Hintergrundfarben in einem Div?

Erzielen mehrerer Hintergrundfarben in einem Div

In CSS kann das Anwenden mehrerer Hintergrundfarben auf ein einzelnes Div durch verschiedene Techniken erreicht werden. Lassen Sie uns einige Optionen mit verschiedenen Szenarien erkunden.

Szenario 1: Div mit zwei gleichen Teilen

So erstellen Sie einen Div mit zwei gleichen Teilen, jeweils mit einer anderen Farbe, linear Farbverläufe können verwendet werden. Um beispielsweise den in „A“ Ihres Bildes gezeigten Effekt zu erzielen, können Sie das folgende CSS verwenden:

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

Dieser Farbverlauf verwendet vier Positionen, um den Farbübergang anzugeben. Die erste und zweite Position definieren die dunkelgraue Farbe von 0 % bis 50 %, und die dritte und vierte Position definieren die hellgraue Farbe von 50 % bis 100 %.

Szenario 2: Div mit Ungleich Teile

Um ein Div mit Teilen unterschiedlicher Höhe zu erstellen, können Sie lineare Verläufe mit Pseudoelementen kombinieren. Um beispielsweise den in „C“ Ihres Bildes gezeigten Effekt zu erzielen, bei dem der blaue Teil in der Höhe kleiner ist als der andere Teil, verwenden Sie das folgende CSS:

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

In diesem Szenario wird ein Pseudo- Element (:after) wird dem div hinzugefügt. Dieses Element fungiert als „kleinerer“ blauer Anteil. Es wird absolut in der unteren rechten Ecke des Div positioniert, mit einer Breite von 50 % und einer Höhe von 20 %. Die Hintergrundfarbe ist auf Weiß eingestellt, wodurch der blaue Anteil überlagert wird, um den gewünschten Effekt zu erzielen.

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