2

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

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

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

!-+-+-+-+-+-+-

留在顶部.png

!-+-+-+-+-+-+-

重拍.png

!-+-+-+-+-+-+-

重拍.png

!-+-+-+-+-+-+-

重拍.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%;
}
4

4 回答 4

1

除了、 和之外top，背景位置属性还接受长度值。因此，只需以像素为单位指定 stayontop.png 结束的位置：centerbottom

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";
    }
}
于 2012-07-30T22:11:00.677 回答
1

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

于 2012-07-30T22:08:50.120 回答
1

为了浏览器兼容性，我会按以下顺序尝试：

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

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

编辑： 将 :before css 更改为此可能会解决调整大小的问题：

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

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

于 2012-07-30T22:09:35.360 回答
1

我认为您只需要确保保持顶部图像的高度与重复图像的高度相同（或高度的 2 倍、3 倍、4 倍）并且都与顶部对齐。

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

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

于 2012-07-30T21:58:46.910 回答