html - 如何在CSS中为背景图像着色

Question

我不太确定该怎么做。我看到有人说在背景图片 url 下的 css 中使用 linear-gradient 并添加 rgba 值，但是出于某种原因，当我在 css 中放置 linear-gradient 它没有工作。当我将代码键入我的 cms 时，它是白色的，而所有其他工作属性都变成灰色。 (只是为了解释它不起作用)这是我的代码。希望这是有道理的。

.topInfo {
    background-image: url('/CMS_Static/Uploads/313864614C6F6F/miami beach-1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 684px;
    linear-gradient: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85)),
}

Answer 1

您可以通过在同一元素上设置 2 个背景来实现。第一个背景需要有点透明，这样你就可以看到第一个背景下面的另一个。线性背景也可以是背景，就像常规图像一样。您可以使用 , 设置多个背景。

例子:

body {
  background-image:
    linear-gradient(0deg, rgba(0,255,0,0.4), rgba(255,0,0,0.2)),
    url(https://upload.wikimedia.org/wikipedia/commons/4/41/Sol454_Marte_spirit.jpg);
}

你可以看到完整的例子here .

您可以阅读和了解background-image here .

您可以阅读并了解linear-gradient here .