How do I put one image inside another one in HTML? - html

Question

I have two images. One is transparent with a bit of opacity, like a shadow, and inside, or top or whatever you call it, I want to put an image that I will use as a button here is my HTML code:
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>
The images 1 and 2 are the two images that I want to use as buttons.

Answer 1

Assuming you want to merge both 1 and 2 on the same place, you should make use of position in a clever way for this. You can do it by using:
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>
Make sure you don't give class names with just integers. It won't work.