Html 隐藏网页底部的图像_Html_Css

Html 隐藏网页底部的图像

html css

Html 隐藏网页底部的图像,html,css,Html,Css,在我的网站上，我想让一个图像从页面底部出现，然后上升到页面顶部，但我不知道如何隐藏页面底部的图像如何做到这一点？我试着在和标签上放置位置：相对和溢出：隐藏，然后尝试将图像放置在位置：绝对大于和的大小，但窗口总是向下滚动- 示例：我试过这两个版本，但都不起作用- <html style="position:relative"> <body> <img style="top:1000px; position: absolute;" src="~/i

在我的网站上，我想让一个图像从页面底部出现，然后上升到页面顶部，但我不知道如何隐藏页面底部的图像

如何做到这一点？我试着在

和

标签上放置

位置：相对

和

溢出：隐藏

，然后尝试将图像放置在

位置：绝对

大于

和

的大小，但窗口总是向下滚动-

示例：

我试过这两个版本，但都不起作用-

<html style="position:relative">
   <body>
      <img style="top:1000px; position: absolute;" src="~/images/MyImage.png" />
   </body>
</html>

<html>
   <body style="position:relative">
      <img style="top:1000px; position: absolute;" src="~/images/MyImage.png" />
   </body>
</html>

您需要使用固定定位，该定位将图像相对于viewpor定位：

position: fixed;

然后使用

top/left/bottom/right

将其放置在您想要的任何位置。例如：

top: 100%;

这将把它移到视口之外。然后，在希望将图像移回时添加：

top: 0;

当您希望激活它时，请使用

要使图像具有动画效果，请将样式添加到图像中：

transition: all 1s ease;
-webkit-transition: all 1s ease;

CSS

HTML

这个想法是：

position: absolute; bottom: 0px;

这将确保它处于绝对底部。意思是，在页面的底部。然后，当你有这个：

position: absolute; top: 0px;

这绝对是最好的

为了给它设置动画，我必须用jQuery做一些不同的事情。我将

bottom

设置为70%，但这是非常疏忽的。见：

你是说制作动画还是只显示两张图片？你需要具有top属性的“px”单元，位置：绝对；和左：0或右：0@progysm他其实不需要它。这是他最小的问题，哈哈。你有没有试过用'top:-1000px'的

position:absolute

？沙哈尔-动画制作。progym-我的实际代码上有“px”，我修正了我的问题。谢谢

<img src="http://lorempixel.com/400/200/sports" alt="">

position: absolute; bottom: 0px;

position: absolute; top: 0px;