css - 让背景图像显示在 Bootstrap 轮播的第一张幻灯片上

Question

我创建了一个 Bootstrap 轮播，我正在使用自定义 CSS 为三张幻灯片中的每一张定义背景图像。由于某种原因，背景图像没有出现在第一张幻灯片上，尽管幻灯片 2 和 3 的背景图像显示正常。我不知道哪里出了问题。我认为这可能与仅应用于第一张幻灯片的事件类有关？这是第一张幻灯片的 HTML 和 CSS，轮播称为 myCarousel，谢谢:

HTML:

<!-- class item means item in carousel -->        
    <div id="slide1" class="item active">


        <!--
        <img src="http://placehold.it/1200x500">
         -->

        <h1>HELLO THERE</h1>

        <div class="carousel-caption">

            <h4>High Quality Domain Names</h4>
            <p>Domains that can help your business marketing</p>

        </div> <!-- close carousel-caption -->

        </div> <!-- close slide1 -->

CSS:

#myCarousel .item { height: 400px; } 


      <!-- top left is the background position of the image, no repeat          because we don't want the background image repeating -->
         #slide1 {
        background: url('images/carousel_medium_01.jpg') top center no-        repeat;
  }

Answer 1

而不是将代码直接放在 <div class="item"> 上我建议制作一个嵌套的 div(替换图像)并应用 height , width和 background-image那里的属性。像这样:

HTML

<div class="carousel-inner" role="listbox">
    <div class="item">
        <div class="item-custom first"></div>
    </div>
    <div class="item">
        <div class="item-custom second"></div>
    </div>
    <div class="item active">
        <div class="item-custom third"></div>
    </div>
</div>

CSS

.item-custom {
    height: 100%;
    width: 100%;
}

然后为您的 .first , .second , 和 .third您可以添加 background-images 的类你要。那应该让你朝着正确的方向前进。希望对您有所帮助。