Wie erstelle ich in CSS eine 50 % fensterbreite Hintergrundfarbaufteilung?

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

Dieses feste Div bleibt stationär, während die Seite scrollt, und erzeugt den gewünschten Split-Hintergrund-Effekt.

Optionen für moderne Browser

Für Für Projekte, die moderne Browser unterstützen, können zusätzliche Techniken eingesetzt werden:

Linear Farbverlauf:

Lineare Farbverläufe bieten eine mühelose Möglichkeit, Hintergründe zu teilen. Durch die Verwendung eines linearen Farbverlaufs in der Hintergrundeigenschaft von können Sie für jede Farbe einen harten Grenzwert von 50 % erstellen:

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

Mehrere Hintergründe mit Hintergrundgröße:

Diese Methode beinhaltet das Anwenden einer Hintergrundfarbe auf das Element und dann mit einem Hintergrundbild mit einer Hintergrundgröße von 50 % der Seitenbreite:

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('background.jpg');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

Zusätzlicher Hinweis

Um sicherzustellen, dass der Hintergrund das gesamte Ansichtsfenster abdeckt, wird empfohlen, die Höhe beider festzulegen das und Elemente auf 100 %. Dies garantiert, dass der Hintergrund bis zum Ansichtsfenster des Benutzers reicht, auch wenn der Seiteninhalt kürzer ist.

Das obige ist der detaillierte Inhalt vonWie erstelle ich in CSS eine 50 % fensterbreite Hintergrundfarbaufteilung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!