有没有办法让我的图片背景更暗，这样我的文字会显示得更好？

Question

第一个问题，希望我问得正确。

我在主页上工作，背景是一张图片。我想把它变暗，这样我的文字会显示得更好。我相信这叫做叠加图像。我已经查看了如何执行此操作，但我无法将他们的代码转换为我的代码。这是我的 CSS:

body {
    background: url(https://worldstrides.com/wp-content/uploads/2017/10/Columbia.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(0,0,0,0.2);

Answer 1

你有文字本身

.text{
    color:(any dark color can go in here) 


}

<p class = text>text<p>

Answer 2

您可以将 linear-gradient 应用于背景。这会在背景图像之上创建一个图层，可以是您想要的任何颜色。

 body{
   background-image: linear-gradient(rgba(39, 71, 118, 0.6), rgba(39, 71, 118, 0.6)), url("https://worldstrides.com/wp-content/uploads/2017/10/Columbia.jpg");
 }

上面的代码将在您的图像之上创建一个蓝色透明层。

Jsfiddle (example)

有没有办法让我的图片背景更暗，这样我的文字会显示得更好？

Is there a way to make my image background darker so my text will show up better?

css

background