為什麼我的 CSS 漸層沒有填滿整個瀏覽器視窗？

Web 瀏覽器中不一致的漸變擴充：全面解釋

在為body 元素建立CSS3 漸變背景時，使用者可能會遇到一個有趣的情況漸變不會拉伸以填充整個視窗而是重複其模式的行為。雖然這是 WebKit 和 Gecko 瀏覽器中的預期功能，但當所需的效果是延伸到視窗底部的連續漸變時，它可能會令人不安。

理解問題

瀏覽器的預設行為是當背景尺寸小於視窗時重複漸變圖案。如果 body 元素的內容只有 300 像素高，漸變將僅覆蓋該高度，然後無限重複以填滿視窗中的剩餘空間。

覆寫預設行為

為了達到所需的全視窗漸層效果，需要使用 CSS 覆寫預設行為。這可以透過應用以下樣式來實現：

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

透過將 html 和 body 元素的高度設定為 100%，整個視窗將成為漸變區域。邊距：0；規則確保 body 元素周圍沒有多餘的空間，並且 background-repeat: no-repeat;防止梯度重複。此外，背景附件：固定；將漸層固定到位，使其不會隨頁面內容滾動。

以上是為什麼我的 CSS 漸層沒有填滿整個瀏覽器視窗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！