如何在 CSS 中建立 50% 視窗寬度的背景顏色分割？

CSS：實現背景顏色為視窗寬度的50%

在Web 開發中，有時需要建立一個分成兩半的背景，具有不同的背景相對面的顏色。傳統上，這種效果是透過在

上設定預設背景顏色來實現的。標籤並覆蓋

使用跨越整個視窗寬度的替代背景顏色。

背景大小支援的挑戰

分割背景的一種方法是使用background-size屬性，它允許指定背景圖像的大小。此程式碼片段舉例說明了此方法：

但是，此解決方案對於需要與 Internet Explorer 7/8 相容的項目不可行，因為這些瀏覽器不支援背景大小屬性。

使用專用 Div 元素的解決方案

對於較舊的瀏覽器，另一種方法是建立一個單獨的

元素。具有固定位置的元素：

此固定 div 在頁面滾動時保持靜止並建立所需的分割背景效果。

現代瀏覽器的選項

對於支援現代瀏覽器的項目，可以採用其他技術：

線性漸變：

線性漸層提供了一種輕鬆分割背景的方法。透過在

的背景屬性中使用線性漸變，您可以為每種顏色創建50% 的硬截止：

具有背景大小的多個背景：

此方法涉及將背景顏色應用於 。元素，然後使用

背景圖片的background-size設定為頁面寬度的50%：

附加說明

為確保背景覆蓋整個視口，建議設定兩者的高度;和元素達到100%。這保證了背景將向下延伸到用戶的視口，即使頁面內容較短。

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