Wie erstelle ich eine Hintergrundfarbe mit einer Breite von 50 % in CSS, ohne die Kompatibilität mit älteren Browsern zu beeinträchtigen?

CSS: Erzielen einer Hintergrundfarbe von 50 % Breite

Im Webdesign das Erstellen eines Hintergrunds, der nur einen Teil des Bildschirms abdeckt, z 50 % seiner Breite sind eine übliche Anforderung. Es stellt sich jedoch die Frage: Wie erreichen wir dies, ohne Methoden zu verwenden, die von älteren Browsern nicht unterstützt werden? In diesem Artikel werden alternative Ansätze zum Anwenden einer Hintergrundfarbe untersucht, die 50 % der Fensterbreite abdeckt.

Zweifarbiger Hintergrund mithilfe eines Div

Für Browser wie IE7/8, die keinen Hintergrund unterstützen -size-Eigenschaft können wir eine Problemumgehung anwenden, indem wir ein festes div-Element erstellen:

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

Dieses div, das oben links fest positioniert ist, füllt die Hälfte aus Bildschirm mit einer Hintergrundfarbe, wodurch der gewünschte Effekt eines zweifarbigen Hintergrunds entsteht. Passen Sie die Hintergrundfarbe nach Bedarf an.

Linearer Farbverlauf für moderne Browser

Wenn die Unterstützung älterer Browser kein Problem darstellt, können wir einen linearen Farbverlauf in der Hintergrundeigenschaft des Körpers verwenden:

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

Dieses CSS erzeugt eine scharfe Trennung zwischen zwei Farben in der Mitte, was zu einem Hintergrund führt, der nahtlos von einer Farbe in eine andere übergeht ein anderer.

Mehrere Hintergründe mit Hintergrundgröße

Für Browser, die Hintergrundgröße unterstützen, können wir eine Hintergrundfarbe auf dem HTML-Element mit einem Hintergrundbild auf dem Körper kombinieren:

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

Dieser Ansatz führt zu einem Hintergrund, der 50 % der Fensterbreite abdeckt, wobei entweder eine Volltonfarbe oder ein Bild verwendet wird.

Hinweis: Sicherstellen Vollbild-Hintergrund

In allen Beispielen stellt die Einstellung der Höhe der HTML- und Body-Elemente auf 100 % sicher, dass der Hintergrund das gesamte Ansichtsfenster abdeckt, auch wenn der Seiteninhalt kürzer ist. Dies ist eine empfohlene Vorgehensweise für Hintergrundeffekte im Vollbildmodus.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Hintergrundfarbe mit einer Breite von 50 % in CSS, ohne die Kompatibilität mit älteren Browsern zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!