CSSの間隔を発行し、新しい背景画像

私は現在、スクロール背景エフェクトを作成するために、CSS background-attachmentプロパティを使用してホームページを構築しています中に、スクロールダウンラグ。CSSの間隔を発行し、新しい背景画像

Iはそれぞれの間でのコンテンツ部分を有する複数の背景を持っています。最初のコンテンツセクションの後、そこに次の背景画像の前に長い小さな白いスペースであり、私はそのスペースを取り除く方法がわからないです。

私が午前もう一つの問題は、ページの実際のパフォーマンスです。

私は新しいイメージにスクロールすると、それは実際に画像が表示されます前に、1秒か2秒の遅延についてあります。新しいbackgroundにスクロールしようとすると、言い換えれば、画面は実際には数秒間フリーズします。

私は、これはまったく重要とは思わないが、私はASP.NET MVC Webアプリケーションとしてこれを構築しています。

body, html, main { 
    /* important */ 
    height: 100%; 
} 

.cd-fixed-bg { 
    min-height: 100%; 
    background-size: cover; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

.cd-fixed-bg.cd-bg-1 { 
    background-image: url('../Images/portfolio1.jpg'); 
} 
.cd-fixed-bg.cd-bg-2 { 
    background-image: url('../Images/portfolio2.jpg'); 
} 
.cd-fixed-bg.cd-bg-3 { 
    background-image: url('../Images/portfolio3.jpg'); 
} 
.cd-scrolling-bg { 
    position:relative; 
    min-height: 70%; 
    padding: 4em 0; 
    line-height: 2.7; 
    z-index: 2; 
    top: 0%; 
    bottom: 0%; 
    left: 0%; 
} 
.cd-intro { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    background-color: inherit; 
    z-index: 100; 
    text-align:center; 
    height: 400px; 
    margin-top: -200px; 
    color: white; 
    width: 600px; 
    margin-left: -300px; 
    font-size: 45px; 
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
} 
.cd-container 
{ 
    width: 90%; 
    max-width: 768px; 
    margin: 0px auto; 
} 
.cd-scrolling-bg.cd-color-3 { 
    background-color: #b4d7a8; 
    color: #3d3536; 
} 
.cd-scrolling-bg.cd-color-2 { 
    background-color: #b4d7a8; 
    color: #3d3536; 
} 
.cd-scrolling-bg.cd-color-3 { 
    background-color: #b4d7a8; 
    color: #3d3536; 
}

出典

2016-07-01 Triforce711

あなたは答えを見たことがありますか？ – dippas

空白がpとh2によって作成されます。

<body> 
     <main class="cd-main-content"> 
      <div class="cd-fixed-bg cd-bg-1"> 
       <div class="cd-intro"> 

       </div> 
      </div> <!-- cd-fixed-bg --> 

      <div class="cd-scrolling-bg cd-color-2">    
       <div class="cd-container"> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur 
        </p> 
       </div> <!-- cd-container --> 
      </div> <!-- cd-scrolling-bg --> 

      <div class="cd-fixed-bg cd-bg-2"> 
       <h2>Lorem ipsum dolor sit amet.</h2> 
      </div> <!-- cd-fixed-bg --> 

      <div class="cd-scrolling-bg cd-color-3"> 
       <div class="cd-container"> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente 

        </p> 
       </div> <!-- cd-container --> 
      </div> <!-- cd-scrolling-bg --> 

      <div class="cd-fixed-bg cd-bg-3"> 
       <div class="cd-container"> 
        <p> 


        </p> 
       </div> 
      </div> <!-- cd-fixed-bg --> 


     </main> <!-- cd-main-content --> 

    </body>

はここに私のCSSです：

は、ここに私のHTMLです。

HTMLでは、段落と見出しにはデフォルトでmarginがありますので、必要なものだけ、または必要なものだけをリセットしてください。

最初のcd-introからleft:50%を削除しました。水平スクロールバーが作成されています。

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
body, 
 
html, 
 
main { 
 
    /* important */ 
 
    height: 100%; 
 
    margin: 0 
 
} 
 
.cd-fixed-bg { 
 
    min-height: 100%; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 
.cd-fixed-bg.cd-bg-1 { 
 
    background-image: url('//lorempixel.com/900/900/sports'); 
 
} 
 
.cd-fixed-bg.cd-bg-2 { 
 
    background-image: url('//lorempixel.com/900/900/animals'); 
 
} 
 
.cd-fixed-bg.cd-bg-3 { 
 
    background-image: url('//lorempixel.com/900/900/city'); 
 
} 
 
.cd-scrolling-bg { 
 
    position: relative; 
 
    min-height: 70%; 
 
    padding: 4em 0; 
 
    line-height: 2.7; 
 
    z-index: 2; 
 
    top: 0%; 
 
    bottom: 0%; 
 
    left: 0%; 
 
} 
 
.cd-intro { 
 
    position: absolute; 
 
    top: 50%; 
 
    background-color: inherit; 
 
    z-index: 100; 
 
    text-align: center; 
 
    height: 400px; 
 
    color: white; 
 
    width: 600px; 
 
    font-size: 45px; 
 
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
 
} 
 
.cd-container { 
 
    width: 90%; 
 
    max-width: 768px; 
 
    margin: 0px auto; 
 
} 
 
.cd-scrolling-bg.cd-color-3 { 
 
    background-color: #b4d7a8; 
 
    color: #3d3536; 
 
} 
 
.cd-scrolling-bg.cd-color-2 { 
 
    background-color: #b4d7a8; 
 
    color: #3d3536; 
 
} 
 
.cd-scrolling-bg.cd-color-3 { 
 
    background-color: #b4d7a8; 
 
    color: #3d3536; 
 
} 
 
h2, p { 
 
    margin: 0 
 
}

<main class="cd-main-content"> 
 
    <div class="cd-fixed-bg cd-bg-1"> 
 
    <div class="cd-intro"> 
 
     some text 
 
    </div> 
 
    </div> 
 
    <!-- cd-fixed-bg --> 
 

 
    <div class="cd-scrolling-bg cd-color-2"> 
 
    <div class="cd-container"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur 
 
     </p> 
 
    </div> 
 
    <!-- cd-container --> 
 
    </div> 
 
    <!-- cd-scrolling-bg --> 
 

 
    <div class="cd-fixed-bg cd-bg-2"> 
 
    <h2>Lorem ipsum dolor sit amet.</h2> 
 
    </div> 
 
    <!-- cd-fixed-bg --> 
 

 
    <div class="cd-scrolling-bg cd-color-3"> 
 
    <div class="cd-container"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente 
 

 
     </p> 
 
    </div> 
 
    <!-- cd-container --> 
 
    </div> 
 
    <!-- cd-scrolling-bg --> 
 

 
    <div class="cd-fixed-bg cd-bg-3"> 
 
    <div class="cd-container"> 
 
     <p> 
 

 

 
     </p> 
 
    </div> 
 
    </div> 
 
    <!-- cd-fixed-bg --> 
 

 

 
</main> 
 
<!-- cd-main-content -->

出典

2016-07-02 00:20:08 dippas

CSSの間隔を発行し、新しい背景画像

答えて

関連する問題