我试图自学HTML和CSS，但似乎找不到如何在图像上方制作标题。我正试图建立一个行星自转的gif展示，到目前为止我已经拥有了地球。我想将单词"em"定位为；地球在gif上方。其他行星也是如此。这是我的密码。我愿意接受关于改进和批评的建议。
body {
background: radial-gradient(circle at bottom, navy 0, black 100%);
height: 100vh;
overflow: hidden;
}
.space {
background: rgba(128, 0, 128, 0.1) center / 200px 200px round;
border: 1px dashed purple;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.stars1 {
animation: space 180s ease-in-out infinite;
background-image: radial-gradient(1px 1px at 25px 5px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 50px 25px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 125px 20px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 50px 75px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 15px 125px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 110px 80px, white, rgba(255, 255, 255, 0));
}
.stars2 {
animation: space 240s ease-in-out infinite;
background-image: radial-gradient(1px 1px at 75px 125px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 100px 75px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 199px 100px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 20px 50px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 100px 5px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 5px 5px, white, rgba(255, 255, 255, 0));
}
.stars3 {
animation: space 300s ease-in-out infinite;
background-image: radial-gradient(1px 1px at 10px 10px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 150px 150px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 60px 170px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 175px 180px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 195px 95px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 95px 145px, white, rgba(255, 255, 255, 0));
}
@keyframes space {
40% {
opacity: 0.75;
}
50% {
opacity: 0.25;
}
60% {
opacity: 0.75;
}
100% {
transform: rotate(360deg);
}
}
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');<html>
<title>Space</title>
<link rel="stylesheet" href="Space 2.css">
<div class="space stars1"></div>
<div class="space stars2"></div>
<div class="space stars3"></div>
<head>
<h1 style="color:white;text-align:center;font-family:Orbitron;font-size:300%;">Space</h1>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
</style>
<figure>
<img src="Earth Spinning.gif" alt="Earth">
<figcaption style="color:white;font-family:Orbitron">Earth</figcaption>
</figure>
<h2 style="font-family:Arial;color:white;">
<div>
<div style="width: 33%; float: left">
<h3 style="color:white;font-family:Orbitron">Earth</h3>
<a href="">
<img class="aboutimage">
</a>
</div>
...
</div>
</html>一种非常简单的方法是将标题div放在HTML代码中的img标记上方。我已经用注意这一点指出了以下代码片段中的更改👇评论。
body {
background: radial-gradient(circle at bottom, navy 0, black 100%);
height: 100vh;
overflow: hidden;
}
.space {
background: rgba(128, 0, 128, 0.1) center / 200px 200px round;
border: 1px dashed purple;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.stars1 {
animation: space 180s ease-in-out infinite;
background-image: radial-gradient(1px 1px at 25px 5px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 50px 25px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 125px 20px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 50px 75px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 15px 125px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 110px 80px, white, rgba(255, 255, 255, 0));
}
.stars2 {
animation: space 240s ease-in-out infinite;
background-image: radial-gradient(1px 1px at 75px 125px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 100px 75px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 199px 100px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 20px 50px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 100px 5px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 5px 5px, white, rgba(255, 255, 255, 0));
}
.stars3 {
animation: space 300s ease-in-out infinite;
background-image: radial-gradient(1px 1px at 10px 10px, white, rgba(255, 255, 255, 0)), radial-gradient(1px 1px at 150px 150px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 60px 170px, white, rgba(255, 255, 255, 0)), radial-gradient(1.5px 1.5px at 175px 180px, white, rgba(255, 255, 255, 0)), radial-gradient(2px 2px at 195px 95px, white, rgba(255, 255, 255, 0)), radial-gradient(2.5px 2.5px at 95px 145px, white, rgba(255, 255, 255, 0));
}
@keyframes space {
40% {
opacity: 0.75;
}
50% {
opacity: 0.25;
}
60% {
opacity: 0.75;
}
100% {
transform: rotate(360deg);
}
}
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');<html>
<title>Space</title>
<link rel="stylesheet" href="Space 2.css">
<div class="space stars1"></div>
<div class="space stars2"></div>
<div class="space stars3"></div>
<h1 style="color:white;text-align:center;font-family:Orbitron;font-size:300%;">Space</h1>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
</style>
<!---NOTICE THIS 👇-->
<figure>
<figcaption style="color:white;font-family:Orbitron">Earth</figcaption>
<img src="Earth Spinning.gif" alt="Earth">
</figure>
<!---NOTICE THIS 👆-->
<h2 style="font-family:Arial;color:white;">
<div>
<div style="width: 33%; float: left">
<h3 style="color:white;font-family:Orbitron">Earth</h3>
<a href="">
<img class="aboutimage">
</a>
</div>
...
</div>
</h2>
</html>