时间戳

首页 > 解决方案 > 试图在我的引导轮播图像/视频上获得深色叠加层

html - 试图在我的引导轮播图像/视频上获得深色叠加层

问题描述

我一直在尝试在我的 bootstrap 5 网站上的图像/视频上添加深色叠加层，但每次我这样做时，它也会将它放在文本上？我的代码如下

.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 上学习了一些教程，但我一定做错了什么？任何帮助，将不胜感激！

结果：

我的结果

它应该是什么样子：

期望的结果

标签： htmlcssoverlaybootstrap-5

解决方案

添加超过z-index覆盖.carousel-caption

.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>

推荐阅读