Wie kann ich in CSS einen zweifarbigen Hintergrund erstellen, wobei eine Farbe 50 % der Fensterbreite einnimmt?

CSS: Legen Sie eine Hintergrundfarbe fest, die 50 % der Breite des Fensters entspricht

Problem:

Ich suche nach einer Möglichkeit, den Hintergrund einer Seite in zwei verschiedene Farben aufzuteilen, wobei eine Farbe 50 % davon einnimmt die Breite des Fensters.

Lösung:

Unterstützung älterer Browser

In Fällen, in denen die Unterstützung älterer Browser unerlässlich ist ( B. IE7/8), erwägen Sie die Verwendung eines dedizierten div-Elements, um das gewünschte Ziel zu erreichen Wirkung:

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink;
}

Das fest positionierte Div füllt den halben Bildschirm aus und bleibt beim Scrollen an Ort und Stelle.

Moderne Browser

Für moderne Browser stehen mehrere alternative Methoden zur Verfügung:

Linear Farbverlauf

Die Nutzung eines linearen Farbverlaufs in der Hintergrundeigenschaft des Körpers bietet eine einfache Lösung:

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

Dadurch entsteht eine scharfe Trennung zwischen den Farben an der 50 %-Marke.

Mehrere Hintergründe mit background-size

Das Zuweisen einer Hintergrundfarbe zum HTML-Element und das Anwenden eines Hintergrundbilds mit einer Hintergrundgrößeneinstellung von 50 % auf das Body-Element führt zu einem ähnlichen Ergebnis:

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

Hinweis: In den letztgenannten Beispielen wird „height: 100 %“ sowohl für HTML als auch für den Text festgelegt, um sicherzustellen, dass der Hintergrund den gesamten Bereich abdeckt Ansichtsfenster, unabhängig von der Höhe des Seiteninhalts.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS einen zweifarbigen Hintergrund erstellen, wobei eine Farbe 50 % der Fensterbreite einnimmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!