我可以避免使用Javascript来实现这种背景效果吗？

Question

我有两张图片：A (700x1500px)和B (700x100px)。我将A设置为我的页面的背景图像。我希望B也可以是一种背景图像，但它会超越A。

B不能放在Y＆lt;页面上有300像素，所以如果你在页面的顶部，B可能根本不会出现在屏幕上。但是，如果您在页面的Y＆gt; = 300px处，则会出现B，并粘贴到浏览器窗口的底部。以下是插图：蓝色框为A，红色框为B，绿色线条显示300px标记。

这可以通过Javascript实现，但可以使用CSS 和普通的HTML标记来完成吗？

Answer 1

如果我理解正确，并且您的页面的最小高度为300px，那么您应该可以使用众多css粘性页脚技术中的一种来实现此类效果。

像这样：http://cleanstickyfooter.herokuapp.com/
或：http://www.cssstickyfooter.com/
或：http://mystrd.at/modern-clean-css-sticky-footer/

OR ，对于文本将流过的严格背景图片：

您是否尝试使用固定位置div作为浮动图像？将其高度设置为100％，最小高度为300px +图像高度，并为该div设置背景图像，其位置位于底部。像这样：http://jsfiddle.net/s_Oaten/JZhsw/

#fixedBG {
    position: fixed;
    z-index: -1;
    height: 100%;
    min-height: 350px;
    width: 100%;
    background: #eee;
    background: url(path_to_image) bottom left repeat-x;
}