图像占用整个页面而不是横幅分隔线

我试图创建一个横幅，当您滚动时模糊，但是当我尝试它时，我的图像填充整个页面（它位于所有元素的后面，但仍然填充）我希望它位于顶部的分隔线上作为横幅。图像占用整个页面而不是横幅分隔线

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

图像占用整个页面而不是横幅分隔线

回答

相关问题