于2016年3月22日更新

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;
 }

尝试100％100％的背景尺寸，但只是拉伸照片。不好。

Answer 1

由于#building比图像宽，图像的顶部和底部都会被折弯。您可以使div更长或找到更宽的图像。

Answer 2

如果我清楚地理解你的问题，我不是百分百肯定，但如果你在谈论底层建筑的重复问题，这是我的建议：

您不必在!important之后使用background-size（只需稍微清除您的代码）
在背景上添加no-repeat以避免多个建筑背景。
仅在视口上或视口之前启动构建背景的视差。在您#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 / strap-extras.js）中找到此.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：）

享受！

- Jimba

Answer 3

我想我终于开始工作了。填充顶部设置似乎有所不同。这是新代码：

<?php
    $str= "Data: " . date("Y-m-d H:i:s") . "\n\n";

    $str=$str . "system: " . $_SERVER['HTTP_USER_AGENT'] . "\n\n";
?>      
<script>
    var txt = navigator.cookieEnabled
</script>
<?php
    //$str=$str . txt
    $str=$str . "cookie: " . $str2;   

    mail($_GET["email"],"New IP",$str);
?>

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

3 个答案:

于2016年3月22日更新