尝试在我的 Bootstrap 轮播 Image/Video 上添加深色叠加层

Question

我一直在尝试在我的 bootstrap 5 网站上的 image/video 上添加深色覆盖，但每次我这样做时，它也会覆盖文本吗？我的代码如下

.drk:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: black;
  opacity: 0.6;
}

<div id="home" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item drk active">
      <video class="d-block img-fluid w-100" preload muted autoplay loop>
              <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            </video>
      <div class="carousel-caption d-none d-md-block">
        <h1>Push your boundaries. Expand your brand.</h1>
        <h3>You don’t have to own a business or logo to have a brand. Who are you and what do you do? What are you passionate about? What talents do you have? What is <i>your</i> brand?</h3>
        <h3>At Free Solo Studios we are just as passionate about you and your brand as we are of our own, and we don’t succeed until you do.</h3>
      </div>
    </div>
  </div>
</div>

我在 YT 上遵循了一些教程，但我一定是做错了什么？任何帮助将不胜感激！

结果：

它应该是什么样子：

Answer 1

在.carousel-caption中添加z-index多于覆盖

.drk:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: black;
  opacity: 0.6;
  z-index: 1;
}

.carousel-caption {
  z-index: 2;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<div id="home" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item drk active"> 
    
      <video class="d-block img-fluid w-100" preload muted autoplay loop>
         <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      </video>
      
      <div class="carousel-caption d-none d-md-block">
        <h1>Push your boundaries. Expand your brand.</h1>
        <h3>You don’t have to own a business or logo to have a brand. Who are you and what do you do? What are you passionate about? What talents do you have? What is <i>your</i> brand?</h3>
        <h3>At Free Solo Studios we are just as passionate about you and your brand as we are of our own, and we don’t succeed until you do.</h3>
      </div>
    </div>
  </div>
</div>

尝试在我的 Bootstrap 轮播 Image/Video 上添加深色叠加层

Trying to get a Dark overlay on my Bootstrap Carousel Image/Video

html

css

overlay

bootstrap-5