Как использовать Bootstrap для добавления затемнения к изображению?

Question

LunarLancer

css , bootstrap

Как использовать Bootstrap для добавления затемнения к изображению?

Как можно достичь эффекта затемнения при использовании background-image, чтобы не затронуть текст на изображении? Все примененные свойства сейчас влияют как на картинку, так и на текст.

26 апреля 2024 г. 8:00

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для добавления затемнения к изображению с использованием Bootstrap, можно использовать классы overlay и overlay-dark. Для этого можно создать div-блок с классом overlay и дополнительно указать класс overlay-dark. Пример:

```html
<div class="overlay overlay-dark">
  <img src="image.jpg" class="img-fluid" alt="Изображение">
</div>
```

Чтобы достичь эффекта затемнения фона при использовании background-image, не затрагивая текст на изображении, можно использовать следующий CSS-код:

```html
<style>
  .overlay {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Здесь можно задать уровень прозрачности черного цвета */
  }
</style>

<div class="overlay" style="background-image: url('image.jpg'); background-size: cover;">
  <h1>Текст на изображении</h1>
</div>
```

Этот код создаст блок с затемнением фона перед фоновым изображением, не затрагивая текст на изображении. Кроме того, вы можете регулировать уровень прозрачности черного цвета в свойстве background-color.