如何使 CSS 漸層背景拉伸以適合整個瀏覽器視窗而不是重複？

Body 元素的漸變背景：重複還是拉伸？

在網頁設計中，使用 CSS 漸層作為背景可以增強美感。然而，當對 body 元素應用漸變時，會出現一個常見問題 - 漸變停止拉伸，而是重複自身。

問題：

假設文件的正文內容的高度為 300 像素。使用 -webkit-gradient 或 -moz-linear-gradient 設定漸變背景會產生僅 300px 高的漸變，並不斷重複以填入剩餘的視窗空間。有沒有辦法讓漸層拉伸以適合視窗而不是重複？

答案：

要實現拉伸以填滿整個視窗的漸變，請應用以下CSS：

html {
    height: 100%;
}

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

• html 元素的高度設定為100% 以確保它擴展到整個視窗高度。
• body 元素的高度也設定為 100%，使其填滿 html 元素內可用的高度。
• 新增 margin: 0 以刪除任何內容身體周圍不必要的間距。
• 背景重複：無重複可防止漸變重複
• 背景附件：固定在視窗滾動時保持漸變到位。

透過實現這些 CSS 規則，body 元素上的漸變背景將拉伸以填充整個窗戶高度，提供視覺上無縫和身臨其境的效果。

以上是如何使 CSS 漸層背景拉伸以適合整個瀏覽器視窗而不是重複？的詳細內容。更多資訊請關注PHP中文網其他相關文章！