如何更改Bootstrap的轮播插件的背景颜色？

Question

我遇到了更改轮播背景颜色的问题。无论我做什么，似乎背景总是白色的。我使用了来自https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h 的代码来制作我的轮播。

<div class="container" id="slides">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://photos-3.dropbox.com/t/2/AADPmL6gjWHr1iYlah93suqa28cVuGlQ32aryhnqDI5JzA/12/611886439/jpeg/32x32/1/_/1/2/ConnectK%20carousel.jpg/ELbFkPkEGO0BIAIoAg/3oq_ZcBwruMHDZh7EsNU5B8UTbQE8n0KIgLWHmtklMQ?size=1280x960&size_mode=3" alt="Connect K project" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://photos-4.dropbox.com/t/2/AADn_i5Z_NwIjiBSH8pnZB7nPAYz-tmRqxlDtEMGsRfOww/12/611886439/jpeg/32x32/1/_/1/2/DigitalBraille.jpg/ELbFkPkEGO0BIAIoAg/TzOhuN9b1r5yKEmQ43BWI7NkmaaSwdLR0ikRW4DnaXc?size=1280x960&size_mode=3" alt="Chicago" style="width:100%;">
      </div>

      <div class="item">
        <img src="https://photos-4.dropbox.com/t/2/AADJdh6q_qeKgWjhsL07M2NQH81JFg8Mx51O7G60oeRlGw/12/611886439/jpeg/32x32/1/_/1/2/MedAppJam.JPG/ELbFkPkEGPMBIAIoAg/aQ1lqISwGTPXaGi6jgbJoeMmDcQUtcKoIyWTrZADmPI?size=1280x960&size_mode=3" alt="MedAppJam project" style="width:100%;">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

我尝试使用CSS样式来改变背景颜色，但出现了一些问题，不知道为什么。这是我添加的CSS代码来尝试更改背景颜色。

#slides{
  color: grey;
  background-color: grey !important;
}

.carousel{
  color: grey;
  background-color: grey !important;
}
.carousel .item{
  color: grey;
  background-color: grey;
}

这是我完整代码的链接，抱歉颜色有点奇怪，我只是随意尝试。与此类似的问题我也查看了其他帖子（如何更改Twitter Bootstrap轮播图背景？），但好像没有解决我的问题。有人能为我解释一下吗？

- Sylvester_Sun

Answer 1

您现在面临的问题是走马灯应用了容器类，因此为元素添加了固定宽度。您看到的两侧的白色实际上是body的背景颜色。

有两种解决方法（我已经缩短了示例代码）：

全宽度

<!-- Remove the container class from the slides div -->
<div id="slides">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <!-- Wrapper for slides -->

        <!-- Left and right controls -->

    </div>
</div>

图像宽度（显示灰色背景）

<!-- Wrap carousel-inner in a container div -->
<div id="slides">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <!-- Wrapper for slides -->
        <div class="container"> <!-- Added this line -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://lorempixel.com/1280/960" alt="Connect K project" style="width:100%;">
                </div>

                <div class="item">
                    <img src="http://lorempixel.com/1280/960" alt="Chicago" style="width:100%;">
                </div>

                <div class="item">
                    <img src="http://lorempixel.com/1280/960" alt="MedAppJam project" style="width:100%;">
                </div>
            </div>
        </div> <!-- Added this line -->

        <!-- Left and right controls -->

    </div>
</div>

我已经在CodePen上fork了你的代码，作为一个例子：https://codepen.io/raptorkraine/pen/Gvaagm?editors=1100#0

- Kieran McClung

Answer 2

这似乎是一种更简单的方法，适用于我（使用bootstrap 4）

<div id="my-carousel-bg": class="carousel-inner"> 像往常一样使用css...

#pwb-carousel-bg {
background-color: grey;
}

- M61Vulcan

Answer 3

<a class="left carousel-control" href="#myCarousel" data-slide="prev" style="background:none;">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" style="background:none;">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
</a>

- user14666635

---

感谢您提供这段代码片段，它可能会提供一些有限的、即时的帮助。一个适当的解释将极大地提高其长期价值，因为它展示了为什么这是一个好的问题解决方案，并使其对未来读者有其他类似问题的人更有用。请[编辑]您的答案以添加一些解释，包括您所做的假设。 - jasie

Answer 4

只需在您的CSS文件中使用已经存在的“carousel-inner”类，如下所示，例如将背景颜色更改为黑色：

.carousel-inner {
background-color: black !important;
}

- Eric