如何让轮播图中Banner全屏显示并解决mix-blend-mode文本缺失问题

问题核心 #

你遇到两个关键问题：mix-blend-mode: screen导致仅"TO"文本显示，其余内容消失；同时Banner未实现真正全屏效果。

原因分析 #

1. 混合模式导致文本消失：screen模式的计算逻辑是将当前元素颜色与下方图层颜色反转后相乘再反转。当文字的半透明白色背景与视频对应区域的亮色混合时，结果趋近于透明；"TO"能显示是因为对应视频区域颜色较深，混合后对比度足够。
2. Banner未全屏：#content自带p-4 p-md-5 pt-5内边距限制了Banner范围，且video-container设置为fixed全屏，导致Banner的定位和尺寸未与视口匹配。

解决方案 #

1. 重构结构实现全屏Banner

将video-container改为banner的子元素，移除#content的内边距，让banner占满整个视口高度。

2. 调整样式保证文本可见

通过修改文字颜色、添加阴影或调整混合模式，提升文字与视频背景的对比度，避免混合后透明。

修改后的完整代码 #

CSS调整

#content {
  flex-grow: 1;
  height: 100vh;
  padding: 0 !important; /* 移除默认内边距，让Banner全屏 */
}

.banner {
  position: relative;
  width: 100%;
  height: 100vh; /* 强制占满视口高度 */
  overflow: hidden;
}

.video-container {
  position: absolute; /* 改为banner的子元素，相对banner定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner .text1 {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  font-weight: 1000;
  font-size: 10vw;
  text-align: center;
  text-transform: uppercase;
  color: #000; /* 设置深色文字，提升混合后对比度 */
  mix-blend-mode: screen;
  text-shadow: 0 0 2px rgba(0,0,0,0.3); /* 可选：添加阴影增强可读性 */
  z-index: 1; /* 确保文字在视频上方 */
}

.wrapper {
  display: flex;
}

#sidebarCollapse {
  position: fixed;
  z-index: 999;
}

HTML调整

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Carousel Text</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
</head>
<body>
  <div class="wrapper d-flex align-items-stretch">
    <div id="content" class="d-block w-100"> <!-- 移除内边距类 -->
      <div class="banner">
        <div class="video-container">
          <video autoplay muted loop>
              <source src="https://mdbootstrap.com/img/video/Sail-Away.mp4" type="video/mp4" />
            </video>
        </div>
        <div id="carouselContent" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner" role="listbox">
            <div class="carousel-item active text-center"> <!-- 移除内边距类 -->
              <h2 class="text1">Welcome <br />to<br />JwellNess</h2>
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

额外说明 #

• 如果需要保留#content的内边距，可给banner设置负边距抵消（如margin: -1.5rem），但需注意处理溢出问题。
• 可根据视频实际色调调整混合模式（如multiply）或文字颜色，达到最佳显示效果。

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