我遇到以下问题。我想，有一个快速的方法可以做到这一点，但现在我找不到解决的方法。
所以，我有一个图像，我希望它仅作为 <body> 页面顶部的背景图像。元素。目前，如果我向下滚动，它会移动到页面底部。
我有以下代码:
body {
color: #d0d0d0;
font-family: Verdana, Tahoma, sans-serif;
font-size: 12pt;
font-weight: 400;
font-style: normal;
line-height: 1.5;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
margin: 0;
z-index: 0;
background:url(../img/main-bg-top.png) no-repeat top center;
background-attachment: fixed;
background-size: cover;
}
最佳答案
那么，您可以创建另一个类并将其插入到所有内容之前，如下所示: Jsfiddle
body {
color: #d0d0d0;
font-family: Verdana, Tahoma, sans-serif;
font-size: 12pt;
font-weight: 400;
font-style: normal;
line-height: 1.5;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
margin: 0;
z-index: 0;
background:#000;
}
.top-image{height:0;}
.top-image img{max-width: 100%;}
.container{height:900px; }
html:
<div class="top-image">
<img src="http://www.wormzweb.com/images/photoalbum/album_28/nature_2118.jpg">
</div>
<div class="container">
<p>random text.</p>
</div>
这是一个快速草图，是适合您的最佳解决方法，以及编写此代码的正确方法(如果您愿意)。
关于css - 在 body 元素中将图像附加到页面顶部，img 不滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25945694/