如何在 HTML 中将一张图片放入另一张图片中？

Question

我有两张图片。一个是透明的，有点不透明，像阴影，在里面，或顶部或任何你称之为的东西，我想放一个我将用作按钮的图像这里是我的 HTML 代码：

body {
  background-image: url(img/fondo.png);
}

div.numero {
  float: left;
}

div.login {
  float: right;
}

<div class="numero"><img src="img/numero.png" width="600px"></div>
<div class="login">
  <img src="img/sombreado.png" />
  <img src="img/1.png" class="1" />
  <img src="img/2.png" class="2" />
</div>

图像 1 和 2 是我想用作按钮的两个图像。

Answer 1

假设你想在同一个地方合并 1 和 2，你应该巧妙地使用position。您可以使用：

body {
  background-image: url(img/fondo.png);
}
div.numero {
  float: left;
}
div.login {
  float: right;
}

.login {
  position: relative;
  width: 100px;
  height: 100px;
}
.login img {
  position: absolute;
  left: 0;
  top: 0;
}
.login img.i-2 {
  opacity: 0.5;
}

<div class="numero">
  <img src="//placehold.it/600?text=numero" width="600px" />
</div>
<div class="login">
  <img src="//placehold.it/100?text=sombreado" />
  <img src="//placehold.it/100?text=1" class="i-1" />
  <img src="//placehold.it/100?text=2" class="i-2" />
</div>

确保你不要只用整数给出类名。它不会工作。