轮播指示器未显示在幻灯片的白色背景上（自定义样式或类添加）？

Posted 2023-03-05

【中文标题】轮播指示器未显示在幻灯片的白色背景上（自定义样式或类添加）？

【英文标题】：Carousel indicators not showing up on white background on slides (custom style or class add)?

【发布时间】：2013-07-26 05:24:24

【问题描述】：

如何重新设置轮播指示器的样式？我有中间内容的白色幻灯片，白色指示器没有显示。如何自定义以使用较暗的颜色以使它们显示出来？

【参考方案1】：

在 Bootstrap CSS 包之后覆盖另一个文件中的 .carousel-indicators li 类。下面我展示了 Bootstrap 到当前版本 (v4) 的每个版本的一些 sn-ps。

引导程序 2.3.2

.carousel-indicators li 
  background-color: #999;
  background-color: rgba(70, 70, 70, 0.25);


.carousel-indicators .active 
  background-color: #444;

CodePen for Bootstrap v2.3.2

---

引导 3.4.1 和 4.3.1

相同的规则适用于两个版本。

/* Add an extra .carousel parent class to increase specificity
   avoiding the use of !important flag. */
.carousel .carousel-indicators li 
  background-color: #fff;
  background-color: rgba(70, 70, 70, 0.25);


.carousel .carousel-indicators .active 
  background-color: #444;

CodePen for Bootstrap v3.4.1CodePen for Bootstrap v4.3.1

【讨论】：

您也可以调整指标周围的轮廓：border:1px solid #444;

这个所谓的解决方案适用于哪个版本的 Bootstrap？

@sea26.2 当我回答这个问题时，如果我没记错的话，Bootstrap 是第 2 版。我将更新答案以包含每个版本的 sn-ps。

【参考方案2】：

别忘了在样式后面加上 !important ：

.carousel-indicators li 
  background-color: #999 !important;
  background-color: rgba(70,70,70,.25) !important;


.carousel-indicators .active 
  background-color: #444 !important;

【讨论】：

声明!important 不是强制性的，也是一种不好的做法。在此处查看更多信息：***.com/questions/3706819/…

【参考方案3】：

我同意@thiagobraga。覆盖引导类 .carousel-indicators li 类。

如果您想保持引导程序的外观和感觉，他们使用边框（带半径）来制作空圆圈。所以你可以覆盖边框颜色：

.carousel-indicators li 
    border-color: #777;


.carousel-indicators .active 
    background-color: #777;

【参考方案4】：

如果你只是想让它们在 Bootstrap 4+ 中变黑。

.carousel-indicators li 
    filter: invert(100%);

向Chris Gunawardena 致敬，感谢他对更改箭头颜色技术的想法。

【参考方案5】：

Bootstrap 4 使用 SVG 图标。你可以反转它的颜色

.carousel-control-next-icon, .carousel-control-prev-icon 过滤器：反转（1）；