0

何らかの理由で、この奇妙な CSS の問題が発生していますが、修正方法がわかりません。マテリアライズ CSS フレームワークを使用しています。ページが読み込まれると、不思議なことに視差要素がページの上に表示されます。ユーザーがスクロールすると消えます。これが私が意味することの写真です:

http://i.stack.imgur.com/ExRPq.png

何か案は?コードは次のとおりです。

  .main-container {
      height: 88vh;
      width: 100%;
      padding: 0;
      margin: 0;
      display: -webkit-flex;
      -webkit-flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 200;
      font-family: Lato;
  }

  .main-container h1 {
    margin-bottom: -5px;
    margin-top: -15px;
  }

  .main-container h5 {
    margin-bottom: 20px;
    font-family: Roboto;
    font-weight: 200;
  }
  #search-box {
    height: 50px;
    width: 500px;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    resize: none;
  }

  @media screen and (max-width: 799px) {
      .parallax-dsp {display: none}
  }

HTML は次のとおりです。

<nav class=" yellow darken-4" role="navigation">
  <div class="container">
    <div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">mxious</a>
      <ul id="nav-mobile" class="right side-nav">
        <li><a href="#"><b>Sign in</b> or <b>register &raquo;</b></a></li>
      </ul><a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
    </div>
  </div>
</nav>

<div class="main-container">
<div class="parallax parallax-dsp"><img class="parallax-dsp" src="https://ununsplash.imgix.net/36/X7L5hgFXQZazzPaK3goC_14084990857_88cabf3b6d_o.jpg?q=75&fm=jpg&s=d8812b80a08b8a04f4cf538f69a13b37"></div>
  <h1>welcome to <logo></logo></h1>
  <h5>Mxious is a social music discovery engine.</h5>
  <input id="search-box" placeholder="type an artist, song, or album name to begin">

前もって感謝します!

4

1 に答える 1

0

あなたの写真から、視差画像を右下にしたいとnav思いますか?…これは修正されたと思います。に amargin-top:を実行するだけで、 のmain-containerすぐ下に配置されますnav

div class="top-fill"別の方法として、上に新しいものを追加しmain-containerて、高さを にすることもできますnav

編集:私はあなたのすべての質問に答えていないように見えますが、私はそのフレームワークを使用しておらず、パララックスもあまり使用していないため、消える問題を修正する方法がわかりません.

于 2015-01-31T23:35:16.427 に答える