4

我有两个图像：A (700x1500px)和B (700x100px)。我将 A 设置为我的页面的背景图像。我希望 B 也是一种背景图像，但它会在 A 之上绘制。

B 不能放置在页面上 Y < 300px 的位置，所以如果你在页面顶部，B 可能根本不会出现在屏幕上。但是，如果您在页面的 Y >= 300 像素处，则会出现 B，并粘在浏览器窗口的底部。这是一个插图：蓝框是A，红框是B，绿线表示300px标记。

在此处输入图像描述

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

4

1 回答 1

0

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

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

或者，对于文本将流过的严格背景图像：

您是否尝试对浮动图像使用固定位置的 div？给它一个 100% 的高度，300 像素的最小高度 + 图像的高度，并为该 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;
}
于 2013-08-21T12:34:05.447 回答