将旋转木马内容从图像更改为背景图像

Question

伙计们，我在做这个带标签的旋转木马。现在，它没有定义的高度，并使用图像延伸到100%，以填补屏幕。我不喜欢它的工作方式。

相反，我想为每一张幻灯片设置一个背景图像。这样，我可以为旋转木马设置一个定义的高度，也可以设置背景以覆盖，这样就可以很好地填充div。

在过去的一两个小时里，我尝试过一些事情，但运气都是零。

查看JSFiddle

这是我的HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner">

    <div class="item active">
      <img src="http://placehold.it/1200x400/cccccc/ffffff">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
      </div>
    </div><!-- End Item -->

     <div class="item">
      <img src="http://placehold.it/1200x400/999999/cccccc">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
      </div>
    </div><!-- End Item -->

    <div class="item">
      <img src="http://placehold.it/1200x400/dddddd/333333">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
      </div>
    </div><!-- End Item -->

    <div class="item">
      <img src="http://placehold.it/1200x400/999999/cccccc">
       <div class="carousel-caption">
        <h3>Headline</h3>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </div><!-- End Item -->

  </div><!-- End Carousel Inner -->

Java

$(document).ready( function() {
$('#myCarousel').carousel({
    interval: false
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
        clickEvent = true;
        $('.nav li').removeClass('active');
        $(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
    if(!clickEvent) {
        var count = $('#myCarousel .nav').children().length -1;
        var current = $('#myCarousel .nav li.active');
        current.removeClass('active').next().addClass('active');
        var id = parseInt(current.data('slide-to'));
        if(count == id) {
            $('#myCarousel .nav li').first().addClass('active');
        }
    }
    clickEvent = false;
});
});

和一点css

#myCarousel .nav a small {
    display:block;
}
#myCarousel .nav {
    background:#eee;
}
#myCarousel .nav a {
    border-radius:0px;
}

#myCarousel img {
    width: 100%;
}

任何帮助都将不胜感激..。干杯!

Answer 1

我想了一下，想明白了

这里有一个JSFIDDLE链接

基本上，您通过html添加一个背景，然后因为旋转木马不包含任何图像，您将需要在css中设置高度等。

<div class="item" style="background: url(http://arti.us/clients/conversant/images/driving.jpg) no-repeat left center; background-size: cover;">