2

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

所以，我有一个图像，我希望它只作为元素页面顶部的背景图像。<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;
}
4

1 回答 1

2

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

这是一个快速草图，为您提供了最佳方法以及编写此代码的正确方法（如果您愿意）。

于 2014-09-20T06:39:49.803 回答