如何在 CSS 中使背景图像变暗？ [复制]

Posted 2023-03-06

【中文标题】如何在 CSS 中使背景图像变暗？ [复制]

【英文标题】：How to darken the background image in CSS? [duplicate]

【发布时间】：2016-07-23 05:12:41

【问题描述】：

我有一个来自 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>

【问题讨论】：

你去。我已经添加了代码。

【参考方案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; 添加到您的:after 元素，然后添加以下内容

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

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

【讨论】：

也没用 :(

尝试将z-index:1或更高级别添加到:after，看看是否落后

这并不像你认为的那样：jsfiddle.net/e8c3ex0h/2（我已经完成了 before 和 after，结果相同。

@cale_b 您的示例看起来运行良好。我错过了什么？

@EgeKaanGürkan，你明白了！请检查约翰的答案 - 似乎是更好的做法。

【参考方案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);

【讨论】：

不是我想要的东西：/

所以你想要一个覆盖？

我想让背景图片变暗一点，这样前面的文字就可以看清楚了。

所以要调整图像的对比度？

不完全。想象一下放置在图像顶部的半不透明黑色矩形。

【参考方案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）