背景图像拉伸到适合超出视口

我有一个页面，我想要一个全屏幕背景图像。这可以正常工作，当身体适合在视口内，我有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。 –

背景图像拉伸到适合超出视口

回答

相关问题