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.

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink; 

Nach dem Login kopieren

}

Moderne Browser

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

Linearer Verlauf:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);

Nach dem Login kopieren