Html 图像内滑块-CSS

我试图在图像中创建滑块。 至于附件，我想改变背景颜色的比例，然后在这个div中插入滑块。 我用了这个例子：

守则： HTML

---

谢谢你的帮助。

好吧。。这不是图像中的滑块，而是滑块中的图像。我为你做了一把小提琴，希望这就是你想要的：太棒了，非常感谢@TeutaKoraqi@drorAlfasi，不客气！祝你好运！：）

            <div class="col-6 col-md-4">
                <img class="temp" src="img/phone.png">
                <div class="bg-image">
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                      <!-- Indicators -->
                      <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                      </ol>

                      <!-- Wrapper for slides -->
                      <div class="carousel-inner" role="listbox">
                        <div class="item active">
                          <img src="./img/testimonial-bg.jpg" alt="...">
                        </div>
                        <div class="item">
                          <img src="http://www.freedomwallpaper.com/nature-wallpaper/nature-hd-wallpapers-water.jpg" alt="...">
                        </div>
                      </div>

                      <!-- Controls -->
                      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                    </div>
                </div>
            </div>

#application img {
    width: 250px;
    height: 375px;
    position: absolute;
}

.temp {
    background: #440;
}

/*Image slider */
.bg-image {
    width:250px;
    height:350px;
    background-repeat:no-repeat;
    background-size:100%;
    position: relative;
    padding: 150px 0 0 0;
    z-index: 1;
}

.carousel-inner>.item>a>img, 
.carousel-inner>.item>img{
     height: 350px;   
}