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

あなたは伝説の男です、本当にありがとうございました！とにかく私はあなたか何かをrepすることができますか？ – vkaylum

@vkaylum問題ありません！彼らがあなたの質問を助け、答えてくれたら、私の答えをアップアップして受け入れてください。 –

答えて

関連する問題