Question

我仍然对编码仍然很陌生，并且正在测试自己制作的网站。我需要一些将图像移动到所需位置的帮助。如您所见，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));
}

.earth_figure {
  display: flex;
  flex-direction: column-reverse;
}

@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');

<!DOCTYPE html>
<html>
  <head>
    <title>Space</title>
    <link rel="stylesheet" href="Space 2.css">
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
    </style>
  </head>
  <body>
    <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>
    <figure class="earth_figure">
      <img src="Earth Spinning.gif" height="329" width="329" alt="Earth">
      <figcaption style="color:white;font-family:Orbitron;font-size:300%">Earth</figcaption>
    </figure>
    <h2 style= "font-family:Arial;color:white;">
  </body>
</html>

Answer 1

您的HTML结构不正确，请尝试查看此代码

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
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));
}

.earth_figure {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.earth_figure h1 {
  position: absolute;
  top: 40%;
  text-align: center;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.earth_figure h1:nth-of-type(2) {
  top: 55%;
}

@keyframes space {
  40% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.25;
  }
  60% {
    opacity: 0.75;
  }
  100% {
    transform: rotate(360deg);
  }
}

<!DOCTYPE html>
<html>
  <head>
    <title>Space</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
    </style>
    <link rel="stylesheet" href="Space 2.css">
  </head>
  <body>
    <div class="space stars1"></div>
    <div class="space stars2"></div>
    <div class="space stars3"></div>
    <figure class="earth_figure">
      <img src="https://cdn.pixabay.com/photo/2020/07/23/15/06/mobile-phone-5431597__340.jpg" height="329" width="329" alt="Earth">
      <h1 style= "color:white;text-align:center;font-family:Orbitron;font-size:300%;">Space</h1>
      <h1 style="color:white;font-family:Orbitron;font-size:300%">Earth</h1>
    </figure>
    <h2 style= "font-family:Arial;color:white;"> </h2>
  </body>
</html>

Answer 2

.earth_figure {
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
}
    .earth_figure img {
    display: flex;
    flex-direction: column-reverse;
    position: absolute;
    bottom: 0;
    left: 30%;
}

请尝试一下 https://jsfiddle.net/m8t5qzy2/

Answer 3

检查一下...

  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));
    }
    
    .earth_figure {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
    #planet-wrapper{
     display: flex;
     flex-direction: row;
     justify-content: space-around;
    }
    
    @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');

 <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>
  <div id="planet-wrapper">
    <figure class="earth_figure">
      <img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
      <figcaption style="color:white;font-family:Orbitron;font-size:200%">Earth</figcaption>
    </figure>
    <figure class="earth_figure">
       <img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
       <figcaption style="color:white;font-family:Orbitron;font-size:200%">Mars</figcaption>
    </figure>
    <figure class="earth_figure">
     <img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
     <figcaption style="color:white;font-family:Orbitron;font-size:200%">Jupiter</figcaption>
   </figure>
   <figure class="earth_figure">
      <img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
      <figcaption style="color:white;font-family:Orbitron;font-size:200%">Saturn</figcaption>
   </figure>
   <figure class="earth_figure">
    <img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
    <figcaption style="color:white;font-family:Orbitron;font-size:200%">Uranus</figcaption>
  </figure>
  <figure class="earth_figure">
     <img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
     <figcaption style="color:white;font-family:Orbitron;font-size:200%">Neptune</figcaption>
  </figure>
  <figure class="earth_figure">
   <img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
   <figcaption style="color:white;font-family:Orbitron;font-size:200%">Mercury</figcaption>
 </figure>
 <figure class="earth_figure">
    <img src="https://i.imgur.com/fPP7RJO.gif" height="80" width="80" alt="Earth">
    <figcaption style="color:white;font-family:Orbitron;font-size:200%">Venus</figcaption>
 </figure>
  </div>
 <h2 style= "font-family:Arial;color:white;">

如何将图像向左移动？

3 个答案: