使用Bootstrap使用过滤器在图像上显示文本？

用户7496931

我正在尝试将一些文本放置在具有背景色作为色调和不透明度的图像上。

我正在使用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;
}

上面给出了这个：

我试过在layer和标头中添加z-index和position，但它会弄大了超大屏幕中的其余位置。

当前渲染的文本显示在背景颜色的后面。我如何定位文本，以使其在.layerdiv上方仍可呈现，尽管它是它的子级？

伊瑟伍德

该文本未显示在任何内容的后面。如巨型机元件上设置的那样，它具有降低的不透明度。您不能为内部元素重置不透明度。而是在背景图片上应用遮罩：

.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。您可以消除图层元素。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。