HTML |移动图像答案

【问题标题】：HTML | Moving an imageHTML |移动图像
【发布时间】：2017-02-12 05:58:26
【问题描述】：

我试图将向下箭头图像放置在天空背景的底部附近。我还希望它在调整窗口大小时保持在原位。（我希望它是一个启动画面，底部有一个箭头，单击时会向下移动到下一部分）

html

<!DOCTYPE html>
<html>
<head>
<title>particles.js demo</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="particles-js" width='100%'></div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
</script>
<script src="js/index.js">
</script>
<img id='downarrow' height="75" width="75" src='images/arrowdown.png'>
</body>
</html>

css

body {
margin: 0;
height: 2000px;
width: 100%;
}
::-webkit-scrollbar {
display: none;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #00a4ff;
background-image: url("http://i.imgur.com/yHL4C4u.png");
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#downarrow {
margin-left: 50%;
transform: translateX(-50%);
}
img {
position: absolute;
}

【问题讨论】：

标签： javascript html css

【解决方案1】：

position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); 会在底部/中心放置一些东西。

body {
  margin: 0;
  height: 2000px;
  width: 100%;
}

::-webkit-scrollbar {
  display: none;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #00a4ff;
  background-image: url("http://i.imgur.com/yHL4C4u.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#downarrow {
  position: absolute;
  transform: translateX(-50%);
  bottom: 0;
  left: 50%;
}

<!DOCTYPE html>
<html>

<head>
  <title>particles.js demo</title>
  <link href="css/style.css" rel="stylesheet">
</head>

<body>
  <div id="particles-js" width='100%'></div>
  <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
  </script>
  <script src="js/index.js">
  </script>
  <img id='downarrow' height="75" width="75" src='images/arrowdown.png'>
</body>

</html>

【讨论】：

你是个传奇人物，非常感谢！无论如何我可以 +rep 你什么的！
@vkaylum 没问题！如果他们帮助并回答了您的问题，请点赞并接受我的回答。