如何使图像无论屏幕高度/宽度如何都停留在屏幕底部

How do I make an image stay at the bottom of the screen no matter the screen height/width?

本文关键字：屏幕 底部 停留在 高度 何使 图像      更新时间：2023-09-26

我试图在屏幕右下角滚动文本时显示图像。我如何为所有屏幕宽度和高度找到它？

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

这将起作用：

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

为 ：将鼠标悬停在文本上创建 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">
相关文章：