對元素應用絕對定位時,必須確保其容器內有足夠的空間。在這種情況下,當 body 元素的高度不足以容納絕對定位的標題時,就會出現問題。
標題最初定位在螢幕的中點,使用 top: 50% 和 left: 50% ,模糊背景漸變。發生這種情況是因為標題被放置在漸變的頂部,導致其消失。
要解決這個問題,提供一個到 body 元素的高度。透過在 CSS 中引入 min-height: 100vh,可以保證主體延伸到視窗的整個高度。這確保了絕對定位標題有足夠的空間,而不會幹擾背景漸變。
以下是解決問題的更新代碼:
<code class="css">body { background: linear-gradient(20deg, #B7B0F6, #B1D5F9); min-height: 100vh; }</code>
透過此修改,背景即使標題絕對定位,漸變也將保持可見。此方法確保了標題的所需中心化和梯度的保留。
以上是為什麼使用絕對定位元素時背景漸變會消失?的詳細內容。更多資訊請關注PHP中文網其他相關文章!