背景圖像拉伸到適合超出視口

我有一個頁面，我想要一個全屏幕背景圖像。這可以正常工作，當身體適合在視口內，我有HTML {高度：100％; }和body {min-height：100％; padding-top：70px; ... background-size：cover; }（頂部填充用於頁眉）。當頁面變得比視口大時，就會出現問題。身體伸展到正確的高度，但背景附件永遠不會大於視口的大小。這裏是一個示例小提琴[https://jsfiddle.net/xdsgek6t/]。在現場版本中還有一個圖像疊加層，但在小提琴中，您可以很容易地看到徑向漸變結束處的線條，即使我已經告訴它覆蓋了身體，由於孩子身高在這個小提琴身高3000px元件。背景圖像拉伸到適合超出視口

html { height: 100%; box-sizing: border-box; } 
 
body { 
 
    overflow-y: scroll; 
 
    padding-bottom: 30px; 
 
    padding-top: 70px; 
 
    background-color: #363636; 
 
    min-height: 100%; 
 
\t background-color: #1976D2; 
 
\t background-image: radial-gradient(circle at top right, #64B5F6 0%, #1976D2 90%); 
 
\t background-repeat: no-repeat; 
 
\t background-attachment: scroll; 
 
\t background-position: right 70px; 
 
\t background-size: cover; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
div.something { height: 3000px; width: 10px; } 
 
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }

<body> 
 
    <header></header> 
 
    <div class="something"></div> 
 
</body>

這最終看起來真的很奇怪，當頁面增長一點點大，確實是明顯的移動。

來源

2017-02-28 Adam Marr

依靠height: 100%添加背景顏色爲HTML，和身體的背景將有效上繪製身體背景。這裏關於HTML/BODY的bg很有趣。當你在其中任何一個上設置背景時，它都是用HTML繪製的。所以爲了改變它們，爲它們設置一個規則，並且不要使用透明作爲bg-color，但是任何普通的顏色都會很好... https://jsfiddle.net/xdsgek6t/2/ –

一些引用add到我以前的評論：https://www.w3.org/TR/css3-background/#root-background –

非常有趣，謝謝你的信息！ –

從html刪除height: 100%;，它會延長。如果你對body需要min-height: 100%，您可以用min-height: 100vh代替，而不會在html

html { box-sizing: border-box; } 
 
body { 
 
    overflow-y: scroll; 
 
    padding-bottom: 30px; 
 
    padding-top: 70px; 
 
    background-color: #363636; 
 
    min-height: 100vh; 
 
\t background-color: #1976D2; 
 
\t background-image: radial-gradient(circle at top right, #64B5F6 0%, #1976D2 90%); 
 
\t background-repeat: no-repeat; 
 
\t background-attachment: scroll; 
 
\t background-position: right 70px; 
 
\t background-size: cover; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
div.something { height: 3000px; width: 10px; } 
 
header { position: absolute; width: 100%; top: 0; left: 0; height: 70px; z-index: 500; background-color: #ddd; }

<header></header> 
 
<div class="something"></div>

來源

2017-02-28 00:05:17

完美，謝謝。這正是爲什麼我的HTML 100％，所以感謝100vh的建議。 –

@AdamMarr sweet，np。 –

背景圖像拉伸到適合超出視口

回答

相關問題