如何更改 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;
}

https://codepen.io/chukt/pen/wqQqyL?editors=1100#0 这是我完整代码的链接。对不起所有奇怪的颜色。我只是在摆弄它。无论如何，我还检查了其他问题，比如这个 改变 twitter bootstrap carousel background? 它似乎不起作用。谁能给我解释一下？

原文由 Sylvester_Sun 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您目前遇到的问题是轮播应用了容器类，因此向元素添加了固定宽度。你在两边看到的白色实际上是身体的背景色。

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

全屏宽度

<!-- 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>

我已经分叉了你的代码笔作为一个例子： https ://codepen.io/raptorkraine/pen/Gvaagm?editors=1100#0

原文由 Kieran McClung 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

<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 发布，翻译遵循 CC BY-SA 4.0 许可协议