我如何在我的整个图像上涂上面具？

Question

我有一个困难的时间得到一个面具，以掩盖我的整个形象，只是使用Bootstra-5。我怎么能这么做？

下面是我的小提琴和代码：

​

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="bg-image">
  <img src="https://mdbootstrap.com/img/new/standard/city/053.jpg" class="w-100" />
  <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)"></div>
</div>

​

Answer 1

只需将类position-relative添加到父元素。

然后position-absolute+ top-0 + end-0 + bottom-0 + start-0到覆盖层。

默认情况下不需要z索引。

​

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<!-- Body -->
<div class="bg-image position-relative">
  <img src="https://mdbootstrap.com/img/new/standard/city/053.jpg" class="w-100" />
  <div class="mask position-absolute top-0 end-0 bottom-0 start-0 " style="background-color: rgba(0, 0, 0, 0.6)"></div>
</div>

​

Answer 2

您可以在标记中转储一堆引导定位类，但是由于您无论如何都需要定制CSS，所以我会使用它，无论是在嵌入式标记中还是在外部样式表中。应严格避免内联样式。它们不容易阅读或维护。

通常的方法是使用伪元素。这样就不需要额外的标记了。请注意，我在容器上使用的是Bootstrap的position-relative类，而不是添加自定义样式规则。

​

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<style>     
  .bg-image:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }
</style>

<div class="bg-image position-relative">
  <img src="https://mdbootstrap.com/img/new/standard/city/053.jpg" class="w-100" />
</div>

​

Answer 3

要获得覆盖，必须添加以下css代码：

.bg-image{
   position: relative;
}

.mask{
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0px;
   top: 0px;
}

给予.bg-image相对位置很重要，因为您希望子元素.mask相对于它的行为。如果没有它，就会覆盖整个body。