CSS背景图像变暗

Question

我有以下内容：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);
}

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

问题

1. 我是否有建议如何使text-shadow更暗？
2. 或者，让背景图像更暗一点？

由于

Answer 1

我会去photoshop模糊背景或给它叠加。但是，你可以尝试在你的top-container类上给它一个线性渐变，然后在背景图像上调用url：

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值更改为您需要的值即可。希望这会有所帮助。

Answer 2

您可以使用,堆叠多个文字阴影，使其更暗。

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

Answer 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;
}