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。这应该让你朝着正确的方向前进。希望有所帮助。

Answer 2

上面的代码正在加载占位符背景图片，但由于缺少父h1 div，它只能在#myCarousel元素后面看到。 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>

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

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

jsfiddle example

Answer 3

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

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

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

3 个答案: