Question

所以，基本上我需要帮助的效果与此页面相同：https://jsfiddle.net/WsXP6/126/

但是，我希望顶部不是图片，而是纯色。似乎无法让它发挥作用...内容部分由于某种原因不会超越顶部。请记住，我刚开始使用HTML＆amp; CSS最近。

我的CSS＆amp; HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以尝试以下代码 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;
}

Answer 2

这是一个javascript视差插件的链接。你必须使用javascript才能获得这种效果。

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

Answer 3

老实说，我不确定你是否只能获得纯色的视差。但也许你可以找到你喜欢的颜色图像并按照这种方式设置。但视差通常用于图像。让我知道结果如何

Answer 4

我能够将背景更改为红色。

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/

内容不滚动标题/横幅

4 个答案: