Question

我有一个Bootstrap 3旋转木马，有3张白色背景图像。我的分页点现在丢失了，因为它们有一个带透明中心的白色边框（在我的例子中，也是白色）。如何使用CSS将这些样式设置为更暗的颜色？提前谢谢！

这是我的旋转木马内部（相当标准）：

   <div class="carousel-inner">
     <div class="item active">
       <img src="images/img1.png" alt="img1">
       <div class="carousel-caption">
         <h3>...</h3>
       </div>
     </div>

     <div class="item">
       <img src="images/img2.png" alt="img2">
       <div class="carousel-caption">
         <h3>...</h3>
       </div>
     </div>

     <div class="item">
       <img src="images/img3.png" alt="img3">
       <br>
       <div class="carousel-caption">
         <h3>...</h3>
       </div>
     </div>
   </div>

Answer 1

查看您提供的标记，我看不到指标。确保幻灯片中包含以下标记。

<ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

要更改指示灯颜色，您需要在两个不同的位置更改它。第一个是一般指示颜色，它将改变所有颜色。第二个是活动幻灯片指示器的颜色。

.carousel-indicators li {
    background: #ccc;
}

.carousel-indicators .active {
    background: #666;
}

Bootstrap旋转木马 - 风格的分页点

1 个答案: