HTML |移動圖像

我試圖使下箭頭圖像靠近天空背景的底部。我也希望它留在當窗口大小的位置。（我想點擊移動時下降到下一節它是一個閃屏在底部，一個箭頭）HTML |移動圖像

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; 
}

來源

2017-02-11 vkaylum

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>

來源

2017-02-11 21:58:26

你是一個傳奇的人，非常感謝！無論如何，我可以+代表你或什麼！ – vkaylum

@vkaylum沒問題！如果他們幫助並回答您的問題，請立即投票並接受我的答案。 –

HTML |移動圖像

回答

相關問題