Question

我不太确定如何做到这一点。我看到有人说在背景图片网址下的css中使用linear gradient并添加了rgba值，但出于某种原因，当我将linear-gradient放入css时它不起作用。当我将代码键入我的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。

Answer 2

线性渐变是背景的属性，它应该类似于

background: linear-gradient(rgba(249, 119, 76,.75), rgba(128, 42, 12,.85));

请参阅https://www.w3schools.com/css/css3_gradients.asp

Answer 3

这绝对是可能的，虽然不完全是你试图接近它的方式。查看this answer以了解如何将多个背景应用于元素。请注意，应用这些背景的顺序会产生影响。

注意您的颜色定义。 rgba接受RGB中定义的颜色，而不是您使用的HEX值。我{* 3}}您的颜色为RGB值：

#F9774C = rgb(249,119,76)
#802A0C = rgb(128,42,12)

将所需的Alpha值添加到这些值并将格式从rgb更改为rgba，您的线性渐变为：

linear-gradient(rgba(249,119,76,.75), rgba(128,42,12,.85))

请查看converted，但请将上面的答案与阅读相关联。它提供了有关浏览器兼容性和后备的有用信息。

如何在CSS中着色背景图像

3 个答案: