Wie kann ich unter Berücksichtigung der Browserkompatibilität einen zweifarbigen Hintergrund erstellen, der 50 % der Fensterbreite einnimmt?

CSS: Legen Sie eine Hintergrundfarbe fest, die 50 % der Breite eines Fensters einnimmt

In einem Versuch, einen Hintergrund zu erstellen, der in zwei verschiedene Farben auf einem Web aufgeteilt ist Auf der Seite wurde die Eigenschaft „background-color“ auf das Body-Tag angewendet, während eine andere auf ein Div angewendet wird, das das gesamte Fenster umfasst. Allerdings ist die Eigenschaft „background-size“ nicht mit IE7/8 kompatibel, was diese Lösung unpraktisch macht.

Unterstützung für ältere Browser

In Situationen, in denen ältere Browser Einschränkungen mit sich bringen, sollten Sie die Verwendung eines separaten div-Elements in Betracht ziehen, das positioniert ist innerhalb der Seite, um den gewünschten Effekt zu erzielen:

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

Beispiel: http://jsfiddle.net/PLfLW/1704/

Dieser Ansatz verwendet ein festes Div, das die Hälfte des Bildschirms abdeckt und auch dann stationär bleibt, wenn Benutzer scrollen. Möglicherweise sind einige Anpassungen der Z-Indizes erforderlich, um sicherzustellen, dass andere Seitenelemente korrekt positioniert sind.

Moderne Browser

Für Browser mit aktuellerer Unterstützung sollten Sie diese alternativen Methoden in Betracht ziehen:

Linearer Farbverlauf:

Diese Technik ist die einfachste. Durch die Verwendung eines linearen Gradienten in der Hintergrundeigenschaft des Körperelements können verschiedene Effekte erzielt werden:

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

Beispiel: http://jsfiddle.net/v14m59pq/2/

Mehrere Hintergründe mit Hintergrundgröße:

Hier wird dem HTML eine Hintergrundfarbe zugewiesen Element, während ein Hintergrundbild auf den Körper angewendet wird. Die Eigenschaft „Hintergrundgröße“ wird dann verwendet, um die Bildbreite auf 50 % der Seite festzulegen:

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

Beispiel: http://jsfiddle.net/6vhshyxg/2/

Zusätzlicher Hinweis:

In den Beispielen für moderne Browser erhalten sowohl das HTML- als auch das Body-Element eine Höhe von 100 %. Dadurch wird sichergestellt, dass sich der Hintergrund auch dann auf die volle Höhe des Benutzerbildschirms erstreckt, wenn der Seiteninhalt kürzer als das Darstellungsfenster ist. Es wird allgemein als gute Praxis angesehen, explizite Höhen für diese Elemente festzulegen.

Das obige ist der detaillierte Inhalt vonWie kann ich unter Berücksichtigung der Browserkompatibilität einen zweifarbigen Hintergrund erstellen, der 50 % der Fensterbreite einnimmt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!