如何在 CSS 中建立雙色背景，其中一種顏色佔據視窗寬度的 50%？

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

題：

問題：

尋求一種將頁面背景分割成兩種不同顏色的方法，一種顏色佔據視窗寬度的50%。

解決方案：

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

較舊的瀏覽器支援

情況如果舊版瀏覽器支援至關重要（例如IE7/8），請考慮利用專用的div元素來實現所需效果：

固定定位的 div 填充半個螢幕並在滾動時保持原位。

現代瀏覽器

對於現代瀏覽器，有幾種替代方法可用：

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

線性漸變

利用主體背景屬性中的線性漸變提供了一個簡單的解決方案：

這創造了一個顏色之間的分界線在50%處明顯mark.

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

具有背景大小的多個背景

為html 元素分配背景顏色並應用背景大小設定為50% 的背景圖片到body 元素會產生類似的結果：

注意：在後面的範例中，為html 和body 設定 height: 100%，以確保背景跨越整個視口，無論頁面內容高度為何。

以上是如何在 CSS 中建立雙色背景，其中一種顏色佔據視窗寬度的 50%？的詳細內容。更多資訊請關注PHP中文網其他相關文章！