CSS - ::after伪元素的定位和尺寸问题

Question

我有两张透明背景的图片，需要将它们叠放在一起并保持相同的定位：

• 1个旋转的（在下方）
• 1个固定的（在上方）

我需要整个图像组合居中，并根据窗口大小调整其大小。

我使用了一个伪元素::after来处理固定的那个图片，但无法使其位置和大小与旋转的那个图片相匹配。

我认为应该涉及到background-size属性，但没能正确地使用它。

如果涉及到完全不同的方法，即使需要使用::after伪类，也希望能得到任何建议。

非常感谢。

body{
   width: 100%;
   height: 100%;
   background-color: #000;
   text-align: center;
   color: #fff;
  }
  .main-container{
   background-color: #00f;
   width: 50%;
   margin: 0 auto;
  }
  .engine-container{
  }
  .engine-complete{
   position: relative;
   width: 100%;
   height: auto;
   margin: 0 auto; 
  }
  .engine-complete::after{
   content: ""; 
   position: absolute;
   width: 191px;
   height: 192px;
   top: 1px;
   left: 0;
   background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png); 
  }
  .engine-rotating{
   width: 50%;
   height: auto;   
  }
  .spin {
    animation-duration: 15s;
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    animation-play-state: running;
  }
  @keyframes spin {
    from {
      transform:rotate(360deg);
    }

    to {
       transform:rotate(0deg);
    }
  }

<div class="main-container">
  <h1>spinning engine</h1>
  <div class="engine-container">
   <div class="engine-complete">
    <img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/>  
   </div>
  </div>
 </div>

- Fred

Answer 1

像这样吗？

编辑：不使用::after伪类将图像设置为背景，我将固定图像添加到了HTML中。 我还删除了其中一个容器。

我使用text-align:center使动画图像居中，并使用position: absolute使固定图像居中。

我将两个图像相对于其父元素.engine-container设置为30％的宽度。

固定图像的z-index比动画图像高，因此它始终出现在其上方。 图像也会根据窗口大小相应地改变大小。

body {
  width: 100%;
  height: 100%;
  background-color: #000;
  text-align: center;
  color: #fff;
}

.main-container {
  background-color: #00f;
  width: 50%;
  margin: 0 auto;
}

.engine-container {
  text-align: center;
  position: relative;
}

.engine-rotating,
.engine-fixed {
  width: 30%;
}

.engine-fixed {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 5000;
}

.spin {
  animation-duration: 15s;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running;
}

@keyframes spin {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

<div class="main-container">
  <h1>spinning engine</h1>
  <div class="engine-container">
    <img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
    <img src="https://image.ibb.co/jOqNma/engine1_crpd.png" class="engine-fixed" alt="">
  </div>
</div>

更新 这是我想出的方法：

使用 ::after 实现类似的效果。我通过将图像 URL 插入到 content: 规则中，而不是设置背景图像，来实现这一点。

body {
  width: 100%;
  height: 100%;
  background-color: #000;
  text-align: center;
  color: #fff;
}

.main-container {
  background-color: #00f;
  width: 50%;
  margin: 0 auto;
}

.engine-container{
  text-align: center;
  position: relative;

}

.engine-rotating{
}

.engine-container::after{
  content: url('https://image.ibb.co/jOqNma/engine1_crpd.png');
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 5000;
}

.spin{
  animation-duration: 15s;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running;
}

@keyframes spin{
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

<div class="main-container">
  <h1>spinning engine</h1>
  <div class="engine-container">
    <img src="https://image.ibb.co/nwOKXF/engine1.png" class="engine-rotating spin" />
  </div>
</div>

- Jcode

---

非常感谢 @Jcode，这解决了我的问题，确实是一个好的解决方案！不过我还在想是否可以使用 ::after 伪类来实现，你觉得呢？ - Fred

@Surreal 我在上面添加了一种替代方案！ - Jcode

谢谢，但是另一种解决方案似乎缺少根据窗口大小调整图像大小的功能。当我尝试使用::after伪类时，也遇到了同样的问题。 - Fred

Answer 2

将 .engine-complete::after 的 position 设置为 relative

.engine-complete::after {position: relative}

body{
   width: 100%;
   height: 100%;
   background-color: #000;
   text-align: center;
   color: #fff;
  }
  .main-container{
   background-color: #00f;
   width: 50%;
   margin: 0 auto;
  }
  .engine-container{
  }
  .engine-complete{
   position: relative;
   width: 100%;
   height: auto;
   margin: 0 auto; 
  }
  .engine-complete::after{
   content: ""; 
   position: relative; /* this was changed */
   width: 191px;
   height: 192px;
   top: 1px;
   left: 0;
   background-image: url(https://image.ibb.co/jOqNma/engine1_crpd.png); 
  }
  .engine-rotating{
   width: 50%;
   height: auto;   
  }
  .spin {
    animation-duration: 15s;
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
    animation-play-state: running;
  }
  @keyframes spin {
    from {
      transform:rotate(360deg);
    }

    to {
       transform:rotate(0deg);
    }
  }

<div class="main-container">
  <h1>spinning engine</h1>
  <div class="engine-container">
   <div class="engine-complete">
    <img src="https://image.ibb.co/nwOKXF/engine1.png" width=191 height=192 class="engine-rotating spin"/>  
   </div>
  </div>
 </div>

- Ephellon Grey

---

谢谢，但这并不能解决问题，因为它完全隐藏了固定图像。 - Fred