图像切断的CSS视差图像问题

Question

在这个网站 (http://rvwinvesting.com/2016/) 上遇到问题，我有两张视差图像。一张是中间的无缝背景，另一张是页面底部页脚附近一系列办公楼的照片。这就是问题所在。当您向上滚动时，页面的底部和底部会出现，因此看起来很奇怪，而不是一个滚动图像。有什么办法可以解决这个问题吗？图像的高度超过 1200 像素，而 div 只有 600 像素，我也尝试过更小的 div 尺寸，无论如何，都会出现接缝。这是该 div 的 CSS：

#building {
    background: url(http://rvwinvesting.com/2014/wp-content/uploads/2014/09/rvw-building.jpg) 50% 0 fixed;
    height: 600px;
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
 }

Tried100%100% for background-size 但这只会拉伸照片。不好。

Answer 1

我不是 100% 确定我是否清楚地理解了您的问题，但如果您正在谈论在底部构建的重复问题，这是我的建议：

1. 您不必在background-size 之后使用!important（只需稍微清除您的代码）
2. 在背景上添加no-repeat 以避免多个建筑物背景。
3. 仅在建筑背景位于视口上或视口之前开始视差。在您的情况下，当#building 到达屏幕底部时，启动视差效果。

希望它会有所帮助。

---

2016 年 3 月 22 日更新

我下载了这个主题（BootstrapParallax）并围绕它玩，请执行以下操作以仅在它出现时启动您的视差：

**将新的“数据”属性添加到您想要的div/section：data-start-at="bottom" 所以你的div/section 会是这样的：

<section id="building" data-speed="4" data-type="background" data-start-at="bottom">

之后，在你的主题文件夹中找到这个 .js 文件（路径：js/strap-extras.js）并替换为以下代码：

// Placeholder
  jQuery(document).ready(function(){
     // cache the window object
     jQuerywindow = jQuery(window);

     jQuery('section[data-type="background"]').each(function(){
       // declare the variable to affect the defined data-type
       var jQueryscroll = jQuery(this),
          startAt = jQueryscroll.data('start-at'),
          yPos, coords, thisOffset;

        jQuery(window).scroll(function() {
          // HTML5 proves useful for helping with creating JS functions!
          // also, negative value because we're scrolling upwards    

          if(!startAt) {

             yPos = -(jQuerywindow.scrollTop() / jQueryscroll.data('speed'));

            // background position
            coords = '50% '+ yPos + 'px';

          } else {
            thisOffset = jQueryscroll.offset();
            thisTop = thisOffset.top;

            //console.log(thisTop - jQuerywindow.outerHeight(), ' wondow: ', jQuerywindow.scrollTop());

            if( (thisTop - jQuerywindow.outerHeight()) < jQuerywindow.scrollTop() ) {

               yPos = -(jQuerywindow.scrollTop() / jQueryscroll.data('speed'));
              // background position
              coords = '50% '+ yPos + 'px';

            }

          }

          // move the background
          jQueryscroll.css({ backgroundPosition: coords });   
        }); // end window scroll
     });  // end section function
  }); // close out script

  document.createElement("section");

PS：js 可以写得更清楚更高效，这只是一个例子。

而且，请清除你的 css，你不需要到处都有!important。

你干净的 CSS 可以是这样的：

#building {
    background: url(/wp-content/uploads/2014/09/rvw-building.jpg) no-repeat 50% 0 fixed;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 600px;
}

您可能需要稍作调整，但希望它能解决您的问题。

否则，你必须学习如何编写js/css :)

享受吧！

-- 金巴

Answer 2

我想我终于让它工作了。 padding-top 设置似乎使一切变得不同。这是新代码：

#building {
    background: url(http://rvwinvesting.com/2014/wp-content/uploads/2014/09/rvw-building.jpg) 50% 0 fixed;
    background-position: top center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    margin: 0 auto !important;
    padding-top: 250px;
    position: relative;
    width: 100%;
    height: 600px;
 }

Answer 3

图片的顶部和底部被裁剪掉，因为#building 比图片宽。您可以使 div 更长或找到更宽的图像。