将图像附加到页面的顶部，img无滚动，正文元素

我有以下问题。我认为，有一个快速的方法来做到这一点，但现在我找不到解决问题的方法。将图像附加到页面的顶部，img无滚动，正文元素

所以，我有一个图像，我希望它作为背景图像只在<body>元素的页面顶部。目前，如果向下滚动，它将移动到页面的底部。

我有folllowing代码：

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; 
}

来源

2014-09-20 user3661795

那么你可以创建另一个类和所有的内容之前插入，这样的事情：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-20 06:39:49

我试过了，但由于某种原因没有工作。让我试试你的方法。 – user3661795 2014-09-20 06:43:09

不客气兄弟;）请考虑标记我的答案是正确的。 – 2014-09-20 06:51:38

有标记，欢迎您;） – user3661795 2014-09-20 07:25:15

将图像附加到页面的顶部，img无滚动，正文元素

回答

相关问题