Отображать текст поверх изображения с помощью фильтра, используя Bootstrap? - PullRequest
Новая
       56

Отображать текст поверх изображения с помощью фильтра, используя Bootstrap?

1 голос
/ 13 апреля 2020

Я пытаюсь разместить текст поверх изображения, имеющего цвет фона в виде оттенка и непрозрачности.

Я использую Bootstrap 4, и возможно некоторые классы переопределяют друг друга, но не уверен на 100%.

Это то, что у меня сейчас есть:

Index.cshtml: 

<div class="layer">
    <div class="jumbotron jumbotron-fluid jumbotron-container resume-jumbotron text-white">
        <div class="container-fluid jumbotron-content">
            <h1 class="text-center jumbotron-header mb-4">Hey there, I'm @Model.FullName!</h1>
        </div>
    </div>
</div>

site.css: 

.jumbotron-container {
    background-repeat: no-repeat;
  background-position: center center;
    background-size: cover;
    filter: opacity(60%);
}

.resume-jumbotron {
    background-image: url(https://content.codecademy.com/courses/asp-dot-net/boots.png);
}

.layer {
    background-color: #512F1E;
    position: relative;
}

.jumbotron-header {
    font-weight: bold;
}

Выше приведено это:

enter image description here

Я пытался добавить z-index и позицию к layer и заголовку, но он испортил Остальная часть позиционирования в jumbotron.

Текущий визуализированный текст отображается за цветом фона. Как я могу расположить текст так, чтобы он отображался выше .layer div, несмотря на то, что он является его дочерним элементом?

1 Ответ

0 голосов
/ 13 апреля 2020

Текст не отображается ни за чем. Он уменьшил непрозрачность, как установлено на элементе jumbotron. Вы не можете сбросить непрозрачность для элементов интерьера. Вместо этого примените маску к фоновому изображению: 

.jumbotron-container {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}
.jumbotron-container::before {
    position: absolute;
    content: '';
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
}

Демо

Мне нужно было установить положение на .jumbotron-content, чтобы сохранить псевдоэлемент позади него.

Замените мой черный цвет маски на rgba, эквивалентный вашему шестнадцатеричному цвету. Вы можете удалить элемент слоя.

...