在 Bootstrap Carousel 的第一张幻灯片上显示背景图像答案

【问题标题】：Getting Background Image to Show on First Slide of Bootstrap Carousel在 Bootstrap Carousel 的第一张幻灯片上显示背景图像
【发布时间】：2016-10-16 23:31:59
【问题描述】：

我创建了一个 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;
  }

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

我通过修改网站使用的媒体查询找到了解决方案。我必须做的是确保我有一个明确的媒体查询规则来涵盖所有潜在的屏幕宽度。在媒体查询中，我为轮播幻灯片指定了背景图像。通过这样做，我发现我总是正确填充了背景图像。以前，对于一定范围的屏幕尺寸，我只是让默认 CSS 定义背景图像，这意味着第一张幻灯片的背景图像没有显示。我猜想为所有可能的屏幕尺寸添加媒体查询意味着总是有一个“触发器”来填充背景图像。

也感谢那些提供答复的人。

【讨论】：

【解决方案2】：

上面的代码正在加载占位符背景图片，但由于缺少父级#myCarousel div，它仅在h1 元素后面可见。 CSS 正在寻找在其上应用显式高度和宽度的父 div。尝试添加父 div：

<!-- class item means item in carousel -->
<div id="myCarousel">
    <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 -->
</div>

这允许应用您的高度/宽度属性，并显示背景图像。

除了 crazymatt 建议更多地组织嵌套元素之外，您还可以使用 background-size 和 background-position 规则根据需要为每张幻灯片显示图像。

jsfiddle example

【讨论】：

我确实已经声明了父 div，我只是没有将它包含在示例代码中。我有：
谢谢。
@Atrix，你看过我帖子中链接的工作小提琴了吗？背景图像显示在小提琴中，我在其中添加了父 div 并修复了违反“不重复”规则的间距。

【解决方案3】：

我建议不要将代码直接放在 <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。这应该让你朝着正确的方向前进。希望对您有所帮助。

【讨论】：

我知道可能有一种解决方法，但我想看看我是否可以修复现有的解决方案，因为除了第一张幻灯片上的图像之外，其余的都可以工作。谢谢。