自举视差答案

【问题标题】：Bootstrap parallax自举视差
【发布时间】：2016-08-30 21:34:05
【问题描述】：

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

移除设置为覆盖的 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;
}

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

我们将不胜感激。

【问题讨论】：

标签： jquery css twitter-bootstrap parallax

【解决方案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;
  }
}

【讨论】：