After searching extensively, I couldn't find any mention of this particular issue. According to the Bootstrap 4.2 documentation on the Jumbotron, I constructed my div with an inline background image. However, when I attempted to apply an overlay on top of it, the text got covered up. Here is the code snippet that I used:
.jumbotron {
position: relative;
background-size: cover;
}
.jumbotron > .overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(40, 40, 38, 0.5);
z-index: 1;
}
.jumbo-text:after {
z-index: 10;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron p-3 p-md-5 text-white rounded bg-dark" style="background: url(img/foobar.jpg) no-repeat center center / cover;">
<div class="overlay"></div>
<div class="col-md-6 px-0">
<h1 class="display-4">Title of a longer featured blog post</h1>
<p class="lead my-3">
Bacon ipsum dolor amet landjaeger cow kevin meatball pork rump. Ham
hock venison ham pastrami, beef porchetta doner tongue filet mignon.
Shank tri-tip porchetta pork turducken swine pork belly hamburger
strip steak andouille landjaeger shoulder. Pastrami pig sausage
porchetta rump. Shank doner pork loin buffalo. Pork chop jerky tail
tenderloin, buffalo tongue turkey pork belly pork loin leberkas
porchetta hamburger rump short ribs.
</p>
<p class="lead mb-0 padded-multiline">
<a href="#" class="text-white font-weight-bold">More</a>
</p>
</div>
</div>In an attempt to resolve this issue, I experimented with creating a separate div for the text content and adjusting the z-index to a higher value, but unfortunately, that approach did not work. Since the background image is intended to be dynamic and subject to change, rather than being fixed or standard, I am seeking guidance on how to effectively apply an overlay to the inline image while ensuring that the text within the jumbotron remains in pure white color (#ffffff).