时间戳

首页 > 解决方案 > 在其他非固定 pos 图像上叠加图像？

html - 在其他非固定 pos 图像上叠加图像？

问题描述

有没有办法通过 ::after 伪元素将一张图片叠加在另一张图片之上？我正在做一个人事数据库作为一个学校项目，我想通过覆盖在旧奖项之上的图像来表示后续奖项。

HTML：

<div class="awardRow">
    <span id="awardAbbrev" class="award2"><img src="path/to/image.png"></span>
    <span id="awardAbbrev2" class="award2"><img src="path/to/image.png"></span>
    <span id="awardAbbrev3" class="award2"><img src="path/to/image.png"></span>
</div>

CSS：

.award2::after {
    content: url(imageToOverlay.png);
    position: relative;
    left: -110px;
}

我尝试了其他几种方法都无济于事。任何帮助，将不胜感激。

标签： htmlcss

解决方案

我为你做了这个，通过这段代码你会明白的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 175px;
        height: 175px;
        color: blue;
        border: 2px solid blue;
      }

      #box1 {
        background-color: aqua;
        position: absolute;
        top: 228%;
        left: 45%;
      }

      #box2 {
        background-color: rgb(145, 255, 0);
        position: absolute;
        top: 70%;
        left: 15%;
      }

      #box3 {
        background-color: rgb(255, 0, 68);
        position: absolute;
        top: 147%;
        left: 30%;
      }

      #box4 {
        background-color: rgb(255, 238, 0);
      }

      .container {
        display: flex;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box" id="box1"></div>
      <div class="box" id="box2"></div>
      <div class="box" id="box3"></div>
      <div class="box" id="box4"></div>
    </div>
  </body>
</html>

推荐阅读