Question

我有以下代码，想要实现类似下面演示的大纲。图像显示在div的顶部，当用户垂直滚动时，另一个图像被重复显示。

但是，我想将repeat.png准确显示在stayontop.png垂直结束的位置。我怎样才能做到这一点？我尝试了不同的background-position:center top, center bottom;变体，但没有运气。

编辑：因为背景图片的高度处于auto模式（background-size:100% auto, 100% auto !important;）任何基于静态高度参考的解决方案，例如background-position:center 50px;不幸的是，在一个div宽度中工作正常，但在用户调整div的大小时失败。（实际上，当另一个用户使用具有不同分辨率的移动电话访问该网站时。）无论如何都要动态设置它吗？

！ - + - + - + - + - + - + -

stayontop.png

！ - + - + - + - + - + - + -

repat.png

！ - + - + - + - + - + - + -

repat.png

！ - + - + - + - + - + - + -

repat.png

！ - + - + - + - + - + - + -

.....

.hede{
    background: url("css/images/stayontop.png"), url("css/images/repeat.png");
    background-repeat:no-repeat, repeat-y;
    background-position:center top, center bottom;
    background-attachment: scroll, scroll;
    background-size:100% auto, 100% auto !important;
    min-height:100%;
}

Answer 1

我认为你只需要确保stayontop图像的高度与重复图像的高度相同（或高度的2倍，3倍，4倍），并且两者都对齐到顶部。

您还需要确保访问您网站的浏览器支持多个背景图片。

对于跨浏览器合规性，最好使用两个HTML元素。

Answer 2

上面的答案可能是最好的解决方案，但只是提出另一个快速的想法。 http://jsfiddle.net/wigster/8FMB7/1/ 我不会在这种形式中使用它，但是你得到了这个想法，通过位置顶部和底部的2个背景，它将创建所需的分割。

Answer 3

对于浏览器兼容性，我会按此顺序尝试：

   .hede{
        background: url("css/images/repeat.png");
        background-repeat:repeat-y;
        background-position:center top;
        background-size:100% auto;
        min-height:100%;
        margin-top: 20px; // assumed height of stayontop.png
    }
    .hede:before {
        content: url("css/images/stayontop.png");
        height: 20px; 
        margin-top: -20px;
    }

您可能需要稍微调整一下代码，但应该可以......

修改将css改为：这可能会解决调整大小问题：

.hede:before { content: url("css/images/stayontop.png"); height: 20px; display: block; margin: -20px auto 0; }

不完全确定，但值得一试......

Answer 4

除了top，center和bottom之外，背景位置属性还接受长度值。所以，只需指定stayontop.png结束的像素：

background-position: center 200px;

每当窗口调整大小时，使用JavaScript设置背景位置：

http://jsfiddle.net/gilly3/rKD8M/

onresize = resetBackgrounds;
function resetBackgrounds() {
    var els = document.querySelectorAll(".hede");
    for (var i = 0; i < els.length; i++) {
        var h = els[i].clientWidth * aspectRatio;  // must define aspectRatio
        els[i].style.backgroundPosition = "center top, center " + h + "px";
    }
}

两个背景图像从另一个结束开始

4 个答案: