内容不滚动在页眉/旗帜

-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

老实说，我不知道，如果你获得视差上只是一个纯色。但是，也许你可以找到你喜欢的颜色的图像，并设置它的方式。但视差通常用于图像。让我知道它是如何变成的