Мне сложно получить маску, чтобы покрыть все мое изображение, просто используя Bootstrap-5. Как я могу это сделать?

Вот мой jsfiddle и мой код ниже:

<!-- 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>
2
ShrockCo 17 Сен 2021 в 19:50

3 ответа

Лучший ответ

Просто добавьте класс position-relative к родительскому элементу.
Затем position-absolute + top-0 + end-0 + bottom-0 + start-0 для наложения.

По умолчанию z-index не требуется.

<!-- 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>
2
tacoshy 17 Сен 2021 в 17:03

Вы можете добавить кучу классов позиционирования Bootstrap в свою разметку, но поскольку вы Мне все равно понадобится собственный 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>
1
isherwood 17 Сен 2021 в 17:10

Чтобы получить оверлей, вам нужно добавить этот код css:

.bg-image{
   position: relative;
}

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

Важно указать относительную позицию .bg-image, потому что вы хотите, чтобы дочерний элемент .mask вел себя относительно него. Без него наложился бы весь body.

0
slow 17 Сен 2021 в 16:54