如何使CSS中的背景图像变暗？

Question

我有一个来自bootstrap的jumbotron,我想让它的背景变暗,而不会触及输入的文本.有没有办法做这样的事情？

我到处寻找,但我发现的所有解决方案都会使文本变暗.

到目前为止我所拥有的:

.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>

Answer 1

尝试这样的事情:

在你的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;到您的:afteralement,然后添加以下

.jumbotron > * {
    position:relative;
    z-index:2;
}

感谢cale_b https://jsfiddle.net/e8c3ex0h/3/