如何在HTML中将一个图像放入另一个图像？

Question

我有两张照片。一个透明，有点不透明，像阴影，内部，或顶部或任何你称之为，我想把我将用作按钮的图像是我的HTML代码：

＆＃13;

＆＃13;

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

div.numero {
  float: left;
}

div.login {
  float: right;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

图像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>

确保不使用整数给出类名。它不起作用。