如何将一个图像重载到另一个图像上

Question

我正试图将一个图像放在另一个图像上。我希望成为蜡烛顶部的火焰。但是正如我想的那样正好相反，我在下面添加我的代码

.candle-container{
    margin-top: 10%;
    width: 50%;
    height: 40%;
    
}
.candle-flame{
    margin-left: 10%;
    
}
.candl{
    margin-left: 91%;
}
    .img-candle{
        height: 399px;
        width: 157px;
        z-index: 9;
        overflow: none;
    }
.img-flame{
    margin-left: 20%;
    z-index: 10;
    margin-left: 103.5%;
    margin-bottom: -4%;
    width: 4%;
    height: 46%;
    
}
.fire-box{
    border-style: groove;
    border-color: black;
    border-width: medium;
    width: 32%;
    height: 14%;
    margin-top: 25%;
    margin-left: 27%;
    padding-top: 5%;
    padding-left: 22%;
    
}

        <div class="candle-container">
            <div class="candle-flame">
                <img src="img/flame.png" class="img-flame">
            </div>
            <div class="candl">
                <img src="img/candle.png" class="img-candle">
            </div>
        </div>
        <div class="fire-box">
            <button type="button">Fire</button>
            <button type="button">Stop</button>
        </div>
 

我试图为这两个图像放置z-index，但是它再次无法正常工作，我将屏幕截图固定在下面。

我希望成为蜡烛顶部的火焰，但它恰好相反。我固定下面使用的图像

我该如何解决这个问题？。任何帮助都会受到赞赏.. !!!!

Answer 1

尝试将蜡烛作为div的背景，然后将火焰放入该div并将其设置为absolute，然后使用top, left, right, bottom将其放置在蜡烛上

Answer 2

只需将样式添加到img-flame课程集position: absolute，并做了一些left top样式。

＆＃13;

＆＃13;

.candle-container{
    margin-top: 10%;
    width: 50%;
    height: 40%;
    
}
.candle-flame{
    margin-left: 10%;
    
}
.candl{
    margin-left: 91%;
}
    .img-candle{
        height: 399px;
        width: 157px;
        z-index: 9;
        overflow: none;
    }
.img-flame{
    position: absolute;
    top: 23%;
    width: 3%;
    height: 14%;
    margin-left: 51%;
}
.fire-box{
    border-style: groove;
    border-color: black;
    border-width: medium;
    width: 32%;
    height: 14%;
    margin-top: 25%;
    margin-left: 27%;
    padding-top: 5%;
    padding-left: 22%;
    
}

＆＃13;

        <div class="candle-container">
            <div class="candle-flame">
                <img src="http://i.stack.imgur.com/U3fab.png" class="img-flame">
            </div>
            <div class="candl">
                <img src="http://i.stack.imgur.com/GDdGA.png" class="img-candle">
            </div>
        </div>
        <div class="fire-box">
            <button type="button">Fire</button>
            <button type="button">Stop</button>
        </div>
 

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试下面的css，它会响应任何设备。

＆＃13;

＆＃13;

.candle-container {
  height: 40%;
  margin-top: 10%;
  width: 100%;
}
.candle-flame {
  text-align: center;
  width: 100%;
}
.img-flame {
  height: auto;
  margin: -25px auto;
  width: auto;
}
.candl {
  margin-left: 0;
  text-align: center;
}
.img-candle {
  height: 399px;
  width: 157px;
  z-index: 9;
}
.fire-box {
  border-color: black;
  border-style: groove;
  border-width: medium;
  height: 14%;
  margin-left: 27%;
  margin-top: 25%;
  padding-left: 22%;
  padding-top: 5%;
  width: 32%;
}

＆＃13;

<div class="candle-container">
            <div class="candle-flame">
                <img src="http://i.stack.imgur.com/U3fab.png" class="img-flame">
            </div>
            <div class="candl">
                <img src="http://i.stack.imgur.com/GDdGA.png" class="img-candle">
            </div>
        </div>
        <div class="fire-box">
            <button type="button">Fire</button>
            <button type="button">Stop</button>
        </div>

＆＃13;

＆＃13;

＆＃13;