HTML | Ein Bild verschieben

Ich versuche, den Pfeil nach unten in die Nähe des unteren Randes des Himmels zu bringen. Ich will es auch in der Lage zu bleiben, wenn die Fenstergröße verändert wird. (Ich will es am unteren Rande ein Splash-Screen mit einem Pfeil zu sein, dass, wenn sie nach unten bewegt, um zum nächsten Abschnitt angeklickt)HTML | Ein Bild verschieben

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

Quelle

2017-02-11 vkaylum

position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); wird etwas am Boden/Mitte setzen.

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>

Quelle

2017-02-11 21:58:26

Sie sind eine Legende Mann, Vielen Dank! Gibt es da überhaupt kann ich dich oder irgendwas repäsentieren! – vkaylum

@vkaylum kein Problem! Ich stimme einfach zu und akzeptiere meine Antworten, wenn sie dir helfen und deine Frage beantworten. –

HTML | Ein Bild verschieben

Antwort

Verwandte Themen