考慮到瀏覽器相容性，如何建立佔據視窗寬度 50% 的雙色背景？

CSS：設定佔據視窗寬度50% 的背景顏色

嘗試建立在網路上分為兩種不同顏色的背景頁面中，background-color 屬性已應用於body 標記，而另一個屬性則應用於包含整個視窗的div。然而，background-size 屬性與 IE7/8 不相容，使得解決方案不切實際。

舊版瀏覽器支援

對於舊版瀏覽器有限制的情況，請考慮使用單獨的div 元素，定位在頁面內，達到想要的效果：

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

範例： http://jsfiddle.net/PLfLW/1704/

這種方法利用一個覆蓋一半螢幕的固定 div，即使使用者滾動時也保持靜止。可能需要對 z 索引進行一些調整，以確保其他頁面元素正確定位。

現代瀏覽器

對於最新支援的瀏覽器，請考慮以下替代方法：

線性漸變：

這種技術是最簡單的。透過在body 元素的背景屬性中使用線性漸變，可以實現各種效果：

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

範例：http://jsfiddle.net/v14m59pq/2/

有background-size的多個背景：

這裡指定了背景顏色到html元素，而背景圖像應用於正文。接著利用background-size屬性將圖片寬度設定為頁面的50%：

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

範例：http://jsfiddle.net/6vhshyxg/2/

附加說明：

在現代瀏覽器的範例中，html 和body 元素兩者的高度均為100%。這確保了即使頁面內容比視窗短，背景也會延伸到使用者螢幕的整個高度。通常認為為這些元素設定明確的高度是一種好的做法。

以上是考慮到瀏覽器相容性，如何建立佔據視窗寬度 50% 的雙色背景？的詳細內容。更多資訊請關注PHP中文網其他相關文章！