Wie kann ich in CSS einen zweifarbigen geteilten Hintergrund erstellen?

CSS: Legen Sie eine Hintergrundfarbe fest, die 50 % des Fensters ausmacht

Es wird versucht, einen Hintergrund auf einer Seite zu erreichen, der „ in zwei Teile gespalten"; zwei Farben auf gegenüberliegenden Seiten? Glücklicherweise gibt es mehrere Möglichkeiten, diesen Effekt zu erzielen, abhängig von Ihren Browser-Unterstützungsanforderungen.

Unterstützung älterer Browser

Wenn die Unterstützung älterer Browser ein Muss ist, dann sind Sie hier genau richtig Ich muss ein zusätzliches festes Div verwenden, das die Hälfte des Bildschirms ausfüllt, und seinen Hintergrund festlegen Farbe.

<pre class="brush:php;toolbar:false">position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink; 

}

Moderne Browser

Wenn Neuere Browser sind Ihre einzige Sorge, Sie haben mehr Optionen:

Linearer Verlauf:

<pre class="brush:php;toolbar:false">height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);

}

Mehrere Hintergründe mit Hintergrundgröße:

<pre class="brush:php;toolbar:false">height: 100%;
background-color: cyan;

}

body {

height: 100%;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 50% auto;

}

Vergessen Sie nicht, die Höhe sowohl für das HTML- als auch für das Body-Element auf 100 % festzulegen, um sicherzustellen, dass Der Hintergrund deckt das gesamte Ansichtsfenster ab.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS einen zweifarbigen geteilten Hintergrund erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!