无论屏幕高度/宽度如何让图像留在屏幕底部？

我试图让图像在屏幕右下角滚过文本时出现。我如何在所有屏幕宽度和高度下调整它？无论屏幕高度/宽度如何让图像留在屏幕底部？

2012-04-16 0x499602D2

就是这样。我不知道如何实施它... – 0x499602D2 2012-04-16 21:11:35

使用位置：固定。这是将元素与视口对齐的最便捷方式。 – koenpeters 2012-04-16 21:21:16

这会工作：

<style type="text/css"> 
    img.floating { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 
</style> 
<img class="floating" src="url to image" />

来源

2012-04-16 21:14:02

你可以在图像上使用固定的位置，并指定左，上，右或底部的属性来满足您的需求，请参阅：http://www.w3schools.com/css/css_positioning.asp为例

来源

2012-04-16 21:11:53 heavysixer

http://w3fools.com/ [MDN - 定位]（https://developer.mozilla.org/en/CSS/position） – Andrew 2012-04-16 21:20:23

感谢指针安德鲁，我不会在将来使用它们。 – heavysixer 2012-04-16 21:42:51

创建CSS样式：悬停在文本上。

<style type="text/css"> 
#bottom { display:none; } 
#text:hover #bottom { 
display:block; 
position:absolute; 
left:0; // how far from the left 
bottom:0; 
} 
</style> 
<div id="text>TEXT</div> 
<img src="bottomimage.jpg" id="bottom">

来源

2012-04-16 21:16:41

:hover，除非它被一个链路上使用不适合IE6工作。用这个。

<style type="text/css"> 
    #myFavoriteFooterImage { 
    bottom:0px; 
    right:0px; 
    position:fixed; 
    display:none; 
    } 
</style> 
<script type="javascript"> 
    document.getElementById("mousyTextFunTime").onmouseover = function(){ 
     document.getElementById("myFavoriteFooterImage").style.display = ""; 
    }; 
    document.getElementById("mousyTextFunTime").onmouseout = function(){ 
     document.getElementById("myFavoriteFooterImage").style.display = "none"; 
    }; 
</script> 

<div id="mousyTextFunTime">Text to mouse over</div> 
<img id="myFavoriteFooterImage" />

来源

2012-04-16 21:19:31

无论屏幕高度/宽度如何让图像留在屏幕底部？

回答

相关问题