內容不滾動在頁眉/旗幟

-1

所以，基本上我需要爲這個頁面上相同的效果幫助：https://jsfiddle.net/WsXP6/126/內容不滾動在頁眉/旗幟

不過，我想頂部不是一個圖片，但純色。似乎無法讓它工作...由於某種原因，內容部分沒有通過頂部。請記住，我剛剛開始使用HTML & CSS。

我的CSS & HTML：

html { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
body { 
 
    font-family: 'Montserrat', sans-serif; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
#logo { 
 
    color: #ffffff; 
 
    font-weight: 700; 
 
    font-size: 1rem; 
 
    float: left; 
 
    margin-left: 40px; 
 
    margin-top: 35px; 
 
} 
 

 
nav { 
 
    float: right; 
 
    margin-top: 40px; 
 
    margin-right: 40px; 
 
} 
 
    a { 
 
    color: #ffffff; 
 
    font-weight: 400; 
 
    font-size: 80%; 
 
    text-decoration: none; 
 
    margin: 0 auto; 
 
    margin-left: 3rem; 
 
} 
 

 
.header { 
 
    background: #0F1014; 
 
    background-size: cover; 
 
    height: 100vh; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 
.content_top { 
 
    margin-top: 260px; 
 
    padding: 4rem 0 8rem 0; } 
 
    .sub_title, .under_title { 
 
    color: #ffffff; 
 
    text-align: center; 
 
    } 
 

 
    .sub_title { 
 
    font-weight: 400; 
 
    font-size: 0.85rem; 
 
    margin: 0 0 5px 0; 
 
    } 
 

 
    .logo_middle { 
 
    display: block; 
 
    margin: auto; 
 
    } 
 

 
    .under_title { 
 
    font-weight: 400; 
 
    font-size: 0.85rem; 
 
    margin: 5px 0 5px 0; 
 
    } 
 

 
.content { 
 
    background-color: #ffffff; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<html> 
 
    <head> 
 
    <title>Jakob Hoeg</title> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="css/styles.css"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0"> 
 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
    <div class="header"> 
 
     <header> 
 
     <a href="index.html"><img id="logo" src="images/logo_top.png" draggable="false"/> 
 
     <nav> 
 
      <a href="#">HJEM</a> 
 
      <a href="#">PORTFOLIO</a> 
 
      <a href="#">KONTAKT</a> 
 
     </nav> 
 

 
     <div class="content_top"> 
 
      <h4 class="sub_title">HEY, MIT NAVN ER</h4> 
 
      <img class="logo_middle" src="images/logo_big.png" draggable="false"/> 
 
      <h4 class="under_title">MULTIMEDIEDESIGN STUDERENDE</h4> 
 
     </div> 
 
     </header> 
 

 
    </div> 
 
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
 

 
    </body> 
 
</html>

來源

2016-09-20 Jakob

更改背景：url（「http://upload.wikimedia.org/wikipedia/commons/8/86/Jefferson_Park_in_Chicago.JPG」）no-repeat top center fixed;'to'背景：紅色;'你完成了。從你給的第一個jsfiddle例子中獲得。 –

如果你看看我的CSS，我已經將它更改爲＃0F1014，但它仍然不起作用？ – Jakob

你可以通過點擊「更新」按鈕來更新jsFiddle，然後在這裏粘貼新的url，這樣我們就可以看到你的代碼在運行。如果我做了背景更改，它工作正常。 – Whothehellisthat

你可以試試下面的代碼 https://jsfiddle.net/WsXP6/268/

CSS：

html { 
    height: 100%; 
    width: 100%; 
} 

body { 
    font-family: 'Montserrat', sans-serif; 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 

#banner{ 
    background-color:#fff; 

} 
#logo{ 

} 
nav{ 
    position:absolute; 
    right:10px; 
    top:10px; 
    } 
nav a{ 
    text-decoration:none; 
    color:#444; 
    padding:0 5px; 
} 
h4{ 
    margin:0; 
    padding:10px 0; 
} 
.content{ 
    background-color:#fff; 
    padding:60px 0; 
} 
.sub_title{ 
    text-align:center; 
} 
.content img{ 
    display:block; 
    text-align:center; 
} 
.under_title{ 
    text-align:center; 
}

來源

2016-09-20 19:24:51

你可以嘗試更具體地瞭解我的HTML或CSS中的錯誤，而不是改變一切嗎？因爲這會讓你感到有點沮喪，所以不要冒犯。感謝您花時間回答。 – Jakob

-1

我能夠將背景更改爲紅色。

html { 
    height: 100%; 
    width: 100%; 
} 

body { 
    font-family: 'Montserrat', sans-serif; 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 

#logo { 
    color: #ffffff; 
    font-weight: 700; 
    font-size: 1rem; 
    float: left; 
    margin-left: 40px; 
    margin-top: 35px; 
} 

nav { 
    float: right; 
    margin-top: 40px; 
    margin-right: 40px; 
} 
    a { 
    color: #ffffff; 
    font-weight: 400; 
    font-size: 80%; 
    text-decoration: none; 
    margin: 0 auto; 
    margin-left: 3rem; 
} 

.header { 
    background-color: red; 
    background-size: cover; 
    height: 100vh; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 


.content_top { 
    margin-top: 260px; 
    padding: 4rem 0 8rem 0; } 
    .sub_title, .under_title { 
    color: #ffffff; 
    text-align: center; 
    } 

    .sub_title { 
    font-weight: 400; 
    font-size: 0.85rem; 
    margin: 0 0 5px 0; 
    } 

    .logo_middle { 
    display: block; 
    margin: auto; 
    } 

    .under_title { 
    font-weight: 400; 
    font-size: 0.85rem; 
    margin: 5px 0 5px 0; 
    } 

.content { 
    background-color: #ffffff; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}

https://jsfiddle.net/crystaloakley/WsXP6/275/

來源

2016-09-20 19:57:20

我可能描述了我的問題很差。我不想將背景改爲紅色 - 我已經改變了背景顏色。我不想創建與我在頂部提供的jsfiddle相同的效果 - 請參閱我的HTML＆CSS - 它不會產生同樣的效果。 – Jakob

我確實看過，但我沒有看到效果。你是否想要在背景上做視差效果？ –

是的，確切地說。這是我正在尋找的詞。 – Jakob

這是一個JavaScript視差插件的鏈接。你必須使用JavaScript才能獲得這種效果。

https://jaicab.com/Paraxify.js/

來源

2016-09-20 20:17:18

因此，爲了在不使用背景圖像的情況下獲得這種效果，我必須使用插件？ – Jakob

老實說，我不知道，如果你獲得視差上只是一個純色。但是，也許你可以找到你喜歡的顏色的圖像，並設置它的方式。但視差通常用於圖像。讓我知道它是如何變成的