Bootstrap 5模态框内轮播背景色修改失败及边框问题求助

我在Bootstrap 5模态框中嵌入了Bootstrap 5图片轮播组件，当把轮播内的图片尺寸缩小到100%以下时，出现了白色背景。这个背景看起来来自modal-content元素，我尝试把它的背景设置为background: rgba(0, 0, 0, 0.83) !important;，结果轮播按钮区域变成了奇怪的灰色，好像还有其他元素影响颜色，但找不到原因。

需求效果：图片周围的整个背景都设置为background: rgba(0, 0, 0, 0.83) !important;，和我已经在modal元素上成功应用的样式一致。另外，modal-content元素周围还有一圈细蓝边框，无法去除。

HTML（Pug模板） #

#assetModal.modal.fade.asset-gallery-modal.text-center(tabindex='-1' aria-labelledby='assetModalLabel' aria-hidden='true')
    .modal-dialog.modal-dialog-centered.modal-xl
        .modal-content.asset-gallery-modal-content
            #assetCarousel.carousel.slide.carousel-fade
                .carousel-inner.asset-modal-carousel-inner
                button.carousel-control-prev(type='button' data-bs-target='#assetCarousel' data-bs-slide='prev')
                    span.carousel-control-prev-icon.asset-gallery-carousel-prev-icon(aria-hidden='true')
                    span.visually-hidden Previous
                button.carousel-control-next(type='button' data-bs-target='#assetCarousel' data-bs-slide='next')
                    span.carousel-control-next-icon.asset-gallery-carousel-next-icon(aria-hidden='true')
                    span.visually-hidden Next

SCSS代码 #

.asset-gallery-modal {
  background: rgba(0, 0, 0, 0.83) !important;
}

.asset-gallery-modal-content {
  // 本应和modal的背景一致，但无效
  background: rgba(0, 0, 0, 0.83) !important;
  border: none !important;
}

.asset-gallery-carousel-item img {
  width: 70%;
}

.asset-gallery-carousel-prev-icon {
  width: 5rem !important;
  height: 5rem !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.asset-gallery-carousel-next-icon {
  width: 5rem !important;
  height: 5rem !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

动态加载轮播图片的JS代码 #

// 设置点击的主图为模态框轮播首图并生成轮播标记
if (config.Elements.assetMainImg)
  config.Elements.assetMainImg.addEventListener('click', async (e) => {
    config.Elements.carouselInner.innerHTML = '';
    config.Elements.assetThumbnailImgs.forEach((thumbNail) => {
      if (thumbNail.src === config.Elements.assetMainImg.src) {
        let markup = `<div class="carousel-item asset-gallery-carousel-item active d-block w-100">
                        <img src="${thumbNail.src}" alt="...">
                      </div> `;
        document.querySelector('.carousel-inner').insertAdjacentHTML('afterbegin', markup);
      } else {
        let markup = `<div class="carousel-item asset-gallery-carousel-item d-block w-100">
                        <img src="${thumbNail.src}" alt="...">
                      </div>`;
        document.querySelector('.carousel-inner').insertAdjacentHTML('afterbegin', markup);
      }
    });
  }); 

1. 解决背景灰色问题 #

灰色是因为Bootstrap轮播控件和轮播容器自带半透明背景，需要统一设置为目标深色背景：

.asset-gallery-modal-content {
  background: rgba(0, 0, 0, 0.83) !important;
  border: none !important;
  padding: 0; // 去除模态框内边距，避免额外空白
}

// 清除轮播前后控件的默认背景
.carousel-control-prev,
.carousel-control-next {
  background-color: transparent !important;
}

// 确保轮播容器背景统一
.carousel {
  background: rgba(0, 0, 0, 0.83) !important;
}

2. 去除细蓝边框 #

细蓝边框是模态框的焦点outline样式，直接清除即可：

.asset-gallery-modal-content {
  outline: none !important;
  box-shadow: none !important; // 同时去掉默认阴影
}

3. 优化轮播项布局 #

让图片居中显示，同时保证轮播区域背景连贯：

.asset-gallery-carousel-item {
  background: rgba(0, 0, 0, 0.83) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 80vh; // 固定最小高度，避免背景断层
}

完整修正后的SCSS #

.asset-gallery-modal {
  background: rgba(0, 0, 0, 0.83) !important;
}

.asset-gallery-modal-content {
  background: rgba(0, 0, 0, 0.83) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0;
}

.carousel {
  background: rgba(0, 0, 0, 0.83) !important;
}

.carousel-control-prev,
.carousel-control-next {
  background-color: transparent !important;
}

.asset-gallery-carousel-item {
  background: rgba(0, 0, 0, 0.83) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
}

.asset-gallery-carousel-item img {
  width: 70%;
}

.asset-gallery-carousel-prev-icon {
  width: 5rem !important;
  height: 5rem !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.asset-gallery-carousel-next-icon {
  width: 5rem !important;
  height: 5rem !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

注：把轮播箭头的fill='%23000'改成了fill='%23fff'，深色背景下箭头更清晰

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