如何在 CSS 中創建 50% 寬度的背景色而不破壞舊瀏覽器相容性？

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

在網頁設計中，建立僅覆蓋螢幕一部分的背景，例如其寬度的50% 是常見要求。然而，問題出現了：我們如何在不使用舊瀏覽器不支援的方法的情況下實現這一目標？本文探討了應用覆蓋視窗寬度 50% 的背景顏色的替代方法。

使用Div 的雙色背景

適用於IE7/8 等不支援背景的瀏覽器-size 屬性，我們可以透過建立固定的div 元素來採用解決方法：

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

這個div 固定在左上角，填滿一半的螢幕具有背景顏色，從而達到所需的雙色背景效果。根據需要調整背景顏色。

現代瀏覽器的線性漸變

如果不考慮對舊版瀏覽器的支持，我們可以在正文的背景屬性中使用線性漸變：

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

此CSS 在中間標記處創建了兩種顏色之間的清晰劃分，從而產生從一種顏色無縫過渡到一種顏色的背景。

具有Background-Size的多個背景

對於支援background-size的瀏覽器，我們可以將html元素上的背景顏色與body上的背景圖像結合：

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

這種方法會產生覆蓋視窗寬度50%的背景，使用純色或單色

注意：確保全螢幕背景

在所有範例中，將html 和body 元素的高度設定為100% 可確保背景覆蓋整個視口，即使頁面內容較短。這是全螢幕背景效果的建議做法。

以上是如何在 CSS 中創建 50% 寬度的背景色而不破壞舊瀏覽器相容性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！