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

Question

我有两张图片:A (700x1500px) 和 B (700x100px)。我将 A 设置为我的页面的背景图像。我希望 B 也可以作为背景图片，但它覆盖在 A 之上。

B 不能放在页面上 Y < 300px 的位置，所以如果您在页面顶部，B 可能根本不会出现在屏幕上。但是，如果您在页面的 Y >= 300px 处，B 将出现，并粘在浏览器窗口的底部。举例说明:蓝色方框为A，红色方框为B，绿线为300px标记。

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

Answer 1

如果我对您的理解是正确的，并且您的页面的最小高度为 300 像素，那么您应该能够使用许多 css 粘性页脚技术中的一种来实现这种效果。

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

或，对于文本将覆盖的严格背景图像:

您是否尝试过为 float 图像使用固定位置的 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;
}