Question

我正在网站上工作，我不想在y方向上repeat背景。

我知道该怎么做。

但在图像之后，我不希望背景变成白色或任何其他颜色。

我希望它能够在到达那个地方时修复，或者让背景滚动得比网站的其他部分慢，所以我不会找到白色部分。

非常感谢

Answer 1

我在找到这个问题的解决方案时找到了这个帖子。我设法编写了一个简短的jQuery脚本，以适应Alex Morales给出的提示。

使用以下代码，正文的背景图像向下滚动到网站的其余部分，直到到达底部。您可以查看我的主页（http://blog.neonfoto.de），看看它的作用。

$( window ).scroll( function(){
  var ypos = $( window ).scrollTop(); //pixels the site is scrolled down
  var visible = $( window ).height(); //visible pixels
  const img_height = 1080; //replace with height of your image
  var max_scroll = img_height - visible; //number of pixels of the image not visible at bottom
//change position of background-image as long as there is something not visible at the bottom  
if ( max_scroll > ypos) {
     $('body').css('background-position', "center -" + ypos + "px");
  } else {
    $('body').css('background-position', "center -" + max_scroll + "px");
  }
});

这实际上是我用JavaScript和JQuery做的第一件事，所以任何改进都会很棒！

Answer 2

这是css3所以它不是很受支持，但我会查看background-size属性。

Answer 3

这只是我的头脑，但我认为你可能需要创建一个包含背景图像的单独div。如果您将其放在主要内容之前的标记中并绝对定位主要内容，它将位于主要内容的后面和页面顶部。所以：

CSS：

 #background_div
{ 
  background: url(images/some_image.png); 
  height: 600px; 
  width: 900px; 
}

#main
{
  height: 1200px;
  width: 800px;
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 0;
}

HTML：

<div id="background_div"> &nbsp; </div>

然后你做的是使用javascript（我推荐jQuery）来检测div在屏幕上的位置。

jQuery的：

此代码来自http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

var $scrollingDiv = $("#background_div");

    $(window).scroll(function(){            
        $scrollingDiv
            .stop()
            .animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow" );                    
    });

滚动背景图像直到结束不再进一步

3 个答案: