Question

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

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

到目前为止我所拥有的：

＆＃13;

.mainJumbotron {
    margin: 0px;
    height: 250px;
    text-align: center;
    background-image: url(http://i.imgur.com/qj2w73W.png);
    background-repeat: no-repeat;
    background-size: cover;
}

＆＃13;

<div class="jumbotron mainJumbotron">
    <h1 style="">Hakkımızda</h1>
</div>

＆＃13;

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以获得理想的黑暗。

UPDATE 已经指出的是，框内的任何内容都被新的伪元素覆盖。这是一个廉价的解决方案。将z-index:1;添加到:after，然后添加以下内容

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

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

Answer 2

您可以在CSS中尝试以下内容，看看是否获得了所需的结果

    #element {
-webkit-box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1);
box-shadow: inset 0px 50px 100px 0px rgba(0, 0, 0, 1);
}

Answer 3

这是怎么做的：

body, h1 {
    margin: 0;
}

.mainJumbotron {
    margin: 0px;
    height: 250px;
    text-align: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                      url(http://i.imgur.com/qj2w73W.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

h1 {
    color: #fff;
}

<div class="jumbotron mainJumbotron">
    <h1 style="">Hakkımızda</h1>
</div>

（另见this Fiddle）

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

3 个答案: