Bootstrap carousel组件控件未呈现透明效果如何解决

问题根因 #

你提供的代码存在两处直接导致样式异常的问题，同时存在样式被意外覆盖的可能：

• 未给首个.carousel-item添加active类：Bootstrap Carousel组件初始化时要求必须存在一个激活状态的轮播项，缺失该类会导致容器尺寸计算、组件样式渲染完全错乱，控制按钮的透明效果会直接失效。
• 固定宽高设置位置错误：你直接给.carousel-item设置了固定宽高，但轮播的前后切换按钮是相对于外层.carousel容器做绝对定位的，外层容器未设置匹配宽高时会出现尺寸塌陷，导致按钮样式渲染异常。
• 存在样式覆盖风险：如果项目中其他全局CSS、自定义样式给button标签设置了不透明背景、强制opacity: 1属性，会覆盖Bootstrap默认的按钮透明样式。

修复步骤 #

1. 给第一个轮播项添加active类
2. 将固定宽高移到外层.carousel容器上，给.carousel-inner设置height: 100%继承容器高度，移除.carousel-item上的内联宽高样式
3. 排查全局样式，避免给轮播控制按钮添加额外不透明背景属性

Bootstrap默认的控制按钮透明样式如下，可对照检查是否被覆盖：

.carousel-control-prev, .carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  color: #fff;
  text-align: center;
  background: transparent;
  border: 0;
  opacity: 0.5;
  transition: opacity .15s ease;
}
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover, .carousel-control-next:focus {
  color: #fff;
  background: transparent;
  outline: 0;
  opacity: 0.9;
}

修复后可直接运行的代码 #

<div class="carousel slide" id="slide-show" data-bs-ride="false" style="width: 435px; height: 245px;">
    <div class="carousel-inner" id="slide-show-contents" style="height: 100%;">
        <div class="carousel-item active">
            <div>This is a slide</div>
        </div>
        <div class="carousel-item">
            <div>This is another slide</div>
        </div>
    </div>
    <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#slide-show"
        data-bs-slide="prev"
    >
        <span
            class="carousel-control-prev-icon"
            aria-hidden="true"
        ></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button
        class="carousel-control-next"
        type="button"
        data-bs-target="#slide-show"
        data-bs-slide="next"
    >
        <span
            class="carousel-control-next-icon"
            aria-hidden="true"
        ></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

注意：使用前确认已正确引入对应版本的Bootstrap CSS与JS bundle文件，不要混用不同大版本的Bootstrap资源。

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