將圖像附加到頁面的頂部，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無滾動，正文元素

回答

相關問題