html - 如何在整个图像上应用蒙版？

Question

我很难仅使用 Bootstrap-5 获得 mask 来覆盖我的整个图像。我怎样才能做到这一点？

这是我的 jsfiddle和我的代码如下:

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98b86869d9a9d9b8899a9dcc7d9c7db" rel="noreferrer noopener nofollow">[email protected]</a>/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

你可以转储一堆 Bootstrap positioning classes在你的标记中，但由于你无论如何都需要自定义 CSS，所以我会用它来实现，无论是在嵌入标签还是外部样式表中。应严格避免内联样式。它们不容易阅读或维护。

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e7eaeaf1f6f1f7e4f5c5b0abb4abb4" rel="noreferrer noopener nofollow">[email protected]</a>/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>