如何在css上的多个图像顶部添加1个图像答案

【问题标题】：How to add 1 image i top of multiple image on css如何在css上的多个图像顶部添加1个图像
【发布时间】：2021-08-19 14:19:10
【问题描述】：

您好，我想知道是否有人可以帮我将一张从 css 调用或加载的图片添加到 html 上的多张图片中。

示例：

提前致谢。

【问题讨论】：

检查我为你编写了一些代码让我知道它是否适合你/

标签： html css image

【解决方案1】：

我认为它对你有用

.image-wrap {
    width: 300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.image-wrap:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

<div class="image-wrap">
  <img src="https://picsum.photos/300/450" />
</div>

【讨论】：

谢谢效果很好，但如果我使用链接dosent工作目标空白的图像。

【解决方案2】：

我认为你需要这样的东西。

    .fi
    {
      z-index: 1;
      width: 100%;
    }
    .fi2
    {
      position:absolute;
      top: 25px;
      left: 45%;
      z-index: 2;
      width: 300px;
      margin: auto;
     
    }

<!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>
</head>
<body>


<div>
  <img src="https://images.news18.com/ibnlive/uploads/2021/07/1627377451_nature-1600x900.jpg" class="fi" >
</div>
  <img src="https://media.newyorker.com/photos/5a95a5b13d9089123c9fdb7e/2:2/w_3289,h_3289,c_limit/Petrusich-Dont-Mess-with-the-Birds.jpg" class="fi2">
</body>
</html>

如果这对您有帮助，请告诉我

【讨论】：

【解决方案3】：

这是你可以做的一件事。

确保图像样本（没有背景颜色）。然后给它与背景图像相同的大小和位置。完成后，将图像样本和 z-index 设为 1。这会将其推到另一张图片上方。

    .image1
    {
      z-index: 1;
      width: 100%;
    }

    .imge2
    {
      position:absolute;
      top: 25px;
      left: 45%;
      z-index: 2;
      width: 300px;
      margin: auto;
    }

希望这是您的答案的解决方案

【讨论】：

或者只是在油漆、photoshop 中编辑图片。并将它们添加为一张图片。