jquery - 自举视差

Question

我正在尝试为 Bootstrap 超大屏幕背景图像添加视差效果。除了在较小的屏幕尺寸上出现的这种令人讨厌的效果外，我让它工作了。每当图像的宽度超过屏幕的宽度时，图像会在滚动过程中缩小，从而破坏视差效果。

删除设置为 cover 的 background-size，可以修复不需要的缩放，但会在更大的屏幕上添加空白。

CSS

.jumbotron-bg {
  background: url("http://res.cloudinary.com/mrcloud/image/upload/q_100/v1472550908/slide-01_vksled.jpg") no-repeat center center, rgba(112, 152, 255, 0.5);
  position: fixed;
  width: 100%;
  height: 550px; /*same height as jumbotron */
  top: 0;
  left: 0;
  z-index: -999;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-blend-mode: soft-light;
  -webkit-background-blend-mode: soft-lightsoft-light;
}

JS

var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
    var scrolled = $(window).scrollTop();
    $('.jumbotron-bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
    parallax();
});

Codepen 示例:http://codepen.io/MarcRuemekorf/pen/KgProm

建议将不胜感激。

Answer 1

如果删除 background-size:cover 在小屏幕上解决了你的问题，但在大屏幕上给了你想要的结果，使用媒体查询只在中/大屏幕上应用背景大小。

.jumbotron-bg {
  background: url("http://res.cloudinary.com/mrcloud/image/upload/q_100/v1472550908/slide-01_vksled.jpg") no-repeat center center, rgba(112, 152, 255, 0.5);
  position: fixed;
  width: 100%;
  height: 550px;
  /*same height as jumbotron */
  top: 0;
  left: 0;
  z-index: -999;
  background-blend-mode: soft-light;
  -webkit-background-blend-mode: soft-lightsoft-light;
}

/* Medium */
@media(min-width:992px) and (max-width:1199px) {
  .jumbotron-bg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}

/* Large */
@media(min-width:1200px) {
  .jumbotron-bg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}