在 body 元素中将图像附加到页面顶部，img 没有滚动答案

【问题标题】：Attach an image to the top of the page, no scroll for img, in the body element在 body 元素中将图像附加到页面顶部，img 没有滚动
【发布时间】：2014-11-14 17:50:47
【问题描述】：

我有以下问题。我认为，有一种快速的方法可以做到这一点，但现在我找不到解决它的方法。

所以，我有一张图片，我希望它在页面顶部的<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;
}

【问题讨论】：

标签： css background background-attachment background-size

【解决方案1】：

您可以创建另一个类并将其插入所有内容之前，如下所示：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>

这是一个简单的草图，为您提供了最好的解决方法，如果您愿意，也是编写此代码的正确方法。

【讨论】：

我试过了，但由于某种原因它不起作用。让我试试你的方法。
不客气，兄弟；）请考虑将我的答案标记为正确。