Bootstrap 4轮播组件求助：标题深色背景与圆形分页

嘿，我来帮你搞定这两个轮播样式的问题，直接上实用解决方案：

需求1：为轮播标题/副标题添加底部深色背景 #

你已经给.carousel-caption加了半透明背景，但默认的Bootstrap样式可能限制了背景的宽度和位置。调整CSS让背景铺满轮播底部，同时保证文字有合适的内边距：

/* 保留你原有图片样式，可选添加适配优化 */
#news img {
  width: 1300px;
  height: 400px;
  object-fit: cover; /* 可选：避免图片拉伸变形 */
}

/* 标题区域深色背景优化 */
div.carousel-caption {
  background: rgba(0,0,0,0.6);
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem 2rem; /* 调整内边距，让文字不贴边 */
  text-align: left; /* 匹配示例图的左对齐效果 */
  transform: none; /* 取消默认偏移，确保背景紧贴轮播底部 */
}

调整后深色背景会完全覆盖轮播底部区域，标题和副标题会在这个背景条里清晰显示，和示例图效果一致。

需求2：修复分页按钮圆形内的页码显示问题 #

你说已经把分页按钮设为圆形但页码不对，这是因为Bootstrap默认的.carousel-indicators li用了text-indent: -999px隐藏文字，改用伪元素做圆点。我们需要重置这个样式，让页码正确居中：

/* 自定义轮播分页指示器 */
.carousel-indicators li {
  width: 30px;
  height: 30px;
  border-radius: 50%; /* 确保是正圆形 */
  text-indent: 0; /* 取消默认的文字隐藏设置 */
  background-color: rgba(255,255,255,0.4); /* 未激活状态的背景色 */
  color: #fff; /* 页码文字颜色 */
  font-size: 0.9rem;
  border: none; /* 去掉默认边框 */
  display: flex;
  align-items: center;
  justify-content: center; /* 让文字水平垂直居中 */
  margin: 0 4px; /* 调整按钮之间的间距 */
  top: -50px; /* 保留你的上移设置，可根据需求调整数值 */
}

/* 激活状态的分页按钮样式 */
.carousel-indicators .active {
  background-color: rgba(0,0,0,0.7); /* 激活时的深色背景 */
  color: #fff;
}

这段代码会重置默认指示器样式，让页码清晰显示在圆形按钮内部，你还可以根据需求调整width/height改变圆形大小，top值调整按钮上移的距离。

把这些CSS加到你的样式表中，就能实现你想要的效果啦～

内容的提问来源于stack exchange，提问作者Runsicky