我希望小行星图像以合理的距离随机分布在主徽标(标题 img)周围的位置,以使其感觉像徽标周围的卫星。我无法通过定位和边距实现相同的目标。此外,当我插入图像时,徽标会向下偏移一点并且页面变得可滚动,我不希望页面可滚动。请帮忙。谢谢!
这是我的 HTML:
<body>
<div id="particles-js"></div>
<!-- UP Satellite -->
<div id="up_sat">
<img class="sat sat1" src="images/sat/rocket.png"/>
<img class="sat sat2" src="images/sat/earth.png"/>
</div>
<!--- HEADER - LOGO ------>
<div id="header"><img src="images/header.png" /></div>
<!-- DOWN Satellite -->
<div id="down_sat">
<img class="sat sat3" src="images/sat/jupiter.png"/>
<img class="sat sat4" src="images/sat/neptune.png"/>
</div>
<!-- Particle Script -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="js/main.js"></script>
</body>
这是我的CSS:
html, body {
margin: 0;
background-color: #0f1824;
height: 100%;
padding:0;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
}
/* ================= MAIN BODY ============== */
#header {
position:relative;
height: 100%;
width:100%;
}
#header img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}