圖像佔用整個頁面而不是橫幅分隔線

我試圖創建一個橫幅，當您滾動時模糊，但是當我嘗試它時，我的圖像填充整個頁面（它位於所有元素的後面，但仍然填充）我希望它位於頂部的分隔線上作爲橫幅。圖像佔用整個頁面而不是橫幅分隔線

HTML/CSS

<div id="banner-container" object="banner" style="height: 250px; width: 100%"> 
<div class="banner" style="position: fixed; background-position: center; -webkit-background-size: cover; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background-image:url('http://s6.postimg.org/d7gcsqvdt/image.jpg')"></div> 
<div class="banner-blurred" style="opacity: 0; background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/0*I7mXgSon9oco-rim.jpeg')"></div>

的JavaScript

$(window).scroll(function() { 
    var s = $(window).scrollTop(), 
    opacityVal = (s/150.0); 
    $('.banner-blurred').css('opacity', opacityVal); 
});

來源

2015-06-04 Dingo

你可以嘗試像

$(window).scroll(function() { 
      var s = $(window).scrollTop(), 
      if (s >= 100){ 
       $('.banner').css({'bottom':'auto', 'height' : '250px'}); 
      }else{ 
       $('.banner').css({'bottom':'0', 'height' : 'auto'}); 
      } 
      opacityVal = (s/150.0); 
      $('.banner-blurred').css('opacity', opacityVal); 
      });

從我的理解（我的圖像填充整個頁面（它在所有元素後面，但它仍然填充頁面）。我希望它位於頂部的分隔符作爲橫幅。）您需要.banner類div將其固定在與id =「banner-container」相同的位置..並且您將.banner位置固定並將底部：0 ...因此您需要將其更改爲auto並將高度：250px添加爲您的id =「橫幅-container「..我做了代碼滾動後大於100px它將改變.banner css

來源

2015-06-04 23:55:56

你能解釋你的修正嗎？爲什麼OP的代碼不會觸及與大小相關的CSS，不起作用？ – sunny

圖像佔用整個頁面而不是橫幅分隔線

回答

相關問題