CSS背景图像变暗答案

【问题标题】：CSS background image make darkerCSS背景图像变暗
【发布时间】：2017-11-10 08:30:35
【问题描述】：

我有以下内容：www.thewhozoo.com

如您所见，它有一张背景图片。

.top-container {
    float: left;
    width: 100%;
    background: url('../images/background1.jpg') no-repeat center center fixed; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
  }

背景图片上面有白色文字，可能有点难以阅读。

我在文本中添加了text-shadow，这有助于使文本更加突出。

.text-description-header {
    font-size: 250%;
    color: white;
    text-shadow: 0px 1px 14px rgba(0,0,0,1.0);
}

但是，我希望文本更加突出。

问题

有什么建议可以让text-shadow 更暗吗？
或者，将背景图像调暗一点？

谢谢

【问题讨论】：

您似乎在寻求基于意见的答案。恐怕这是题外话了。如果我错了，请纠正我。
嗨，乔治，不是真的。我正在寻找有关如何使阴影或图像变暗的答案。然后我将玩弄这两个选项，并使用我最喜欢的一个。我认为非常直接和技术性的问题。
你可以用css伪元素覆盖
没有正确的标题（可以解释问题）=> 否决

标签： html css

【解决方案1】：

我会去 Photoshop 来模糊背景或给它一个叠加层。但是，您可以尝试在背景图像上的 url 调用之前在 top-container 类上给它一个线性渐变，如下所示：

background: linear-gradient( rgba(0,0,0,0.5), rgba(0, 0, 0, 0.5) ),url(../images/background1.jpg) no-repeat center center fixed;

只需将 rgba 值更改为您需要的值。希望这会有所帮助。

【讨论】：

嗨，朱利安，谢谢。那个较暗的背景图像看起来很棒。为我工作。
没问题。很高兴它有帮助。

【解决方案2】：

您可以使用, 叠加多个文本阴影以使其更暗。

text-shadow: 0px 0px 10px black, 0px 0px 10px black;

【讨论】：

【解决方案3】：

您可以使用下面的 css 来获得相同的效果

.top-container {
 position:relative;
}

.top-container::before {
 content:'';
 background:rgba(0,0,0,0.5);
 width:100%;
 height:100%;
 position:absolute;
 left:0px;
 top:0px;
 z-index:-1;
}

【讨论】：