2014-12-07 50 views
0

所以我有一个图像我想要位于页面的左下角。如果页面底部在加载时不可见,我希望用户必须向下滚动才能看到它。每次我试图查看这些,每个人都希望他们的图像与用户滚动,而这不是我想要的。在滚动时强制图像滚动到页面的底部(不随用户滚动)

这里是我当前的.css

#backgroundImageOne{ 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 

然后我在布局像这样实现:

<body> 
    <div style="height:100%"> 
    <div id="placeHolder"> 
     <div id="backgroundImageOne"> 
     <img src="/images/background1.png" 
     </div> 
    </div> 
    . 
    . 
    . 
</body> 

任何关于如何在的底部使这个逗留帮助或提示所有的页面都会非常有帮助。谢谢。

回答

1

设置为position: relative;与CSS的身体。这应该工作。

+0

我也试过这个。但是,它会将其锁定到页面加载时我可以查看的底部,而不是页面的实际底部。然后当我向下滚动时,它会粘在页面中间。 – 2014-12-07 22:48:10

+0

您应该将该图片与该图片分离出来,并将其放置在正文标签之后(正好位于正文标签之前)。看看http://jsfiddle.net/jnzrko02/ – redelschaap 2014-12-07 22:52:08

+0

好的。我也这样做了,结果相同。是否有可能存在问题,因为它的布局不在实际页面上? – 2014-12-07 23:00:50

0
#backgroundImageOne{ 
    position: fixed; 
    bottom: 0px; 
    left: 0px; 
} 

<div id="backgroundImageOne"> 
    <img src="/images/background1.png"> 
</div> 
+0

当我设置为固定时,图像会随页面一起滚动。 – 2014-12-07 22:47:08

+0

??看到这个http://jsfiddle.net/qh01deaz/ – 2014-12-07 22:57:23

+0

如果你想让用户滚动页面你可以显示或隐藏#backgroundImageOne读取scrollTop的值 – 2014-12-07 23:00:20