<分区>
我有一个来自 bootstrap 的超大屏幕，我想在不触摸其中输入的文本的情况下使它的背景变暗。有没有办法做这样的事情？
我到处都看过，但我发现的所有解决方案也会使文本变暗。
我目前拥有的:
.mainJumbotron {
margin: 0px;
height: 250px;
text-align: center;
background-image: url(http://i.imgur.com/qj2w73W.png);
background-repeat: no-repeat;
background-size: cover;
}<div class="jumbotron mainJumbotron">
<h1 style="">Hakkımızda</h1>
</div>最佳答案
尝试这样的事情:
在您的 jumbotron 类中，通过添加 position:relative; 为其添加更多 CSS(如果它尚不存在)。这将允许将下一步定位在该框内。
然后，添加一个:after 伪元素。使用以下 CSS
.jumbotron:after {
content:"";
display:block;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
position:absolute;
top:0;
left:0;
z-index:1 /*Added this in the updated */
}
background-color 阴影由最终值控制。 0.5 是 50% 的不透明度，提高到 1 或降低到 0 以获得您想要的暗度。
更新 已经指出的是，盒子内部的任何东西都被新的伪元素覆盖了。这是一个便宜的解决方案。将 z-index:1; 添加到您的 :after 元素，然后添加以下内容
.jumbotron > * {
position:relative;
z-index:2;
}
感谢 cale_b https://jsfiddle.net/e8c3ex0h/3/
关于html - 如何在 CSS 中使背景图像变暗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36389481/