使用线性渐变着色背景图像不起作用答案

【问题标题】：Tinting background image with linear-gradient doesn't work使用线性渐变着色背景图像不起作用
【发布时间】：2015-03-26 03:58:34
【问题描述】：

我正在尝试使用透明的线性渐变为图像着色。开发工具说我的属性无效。如果我摆脱渐变，图像会显示得很好。我有什么遗漏吗？

body {
    background: linear-gradient (rgba(255,0,0,0.45),rgba(255,0,0,0.45)),
                url('Fabric-4.png');
    font-family: 'Oswald', sans-serif;
    font-size: large;
}

【问题讨论】：

标签： css background-image linear-gradients

【解决方案1】：

在使用 css 渐变属性时，您需要为不同的浏览器使用前缀，检查此代码。

body { 
  background: -webkit-linear-gradient(rgba(255,0,0,0.45), rgba(255,0,0,0.45));
  font-family: 'Oswald', sans-serif;
  font-size: large;
}

【讨论】：

是的，这不起作用...使用 chrome 您不需要供应商前缀...谢谢您尝试

【解决方案2】：

这仅仅是因为您的标记失败。你有一个空间太多了。删除linear-gradient 和( 之间的空格，您将看到问题已排序。我在下面添加了工作代码，并根据自己的喜好对其进行了标记。

Here's a pen with the working example (and a different image). 尝试在笔中添加空格，然后看到一切又消失了。 :)

body {
    background: 
        linear-gradient(
            rgba(255,0,0,0.45),
            rgba(255,0,0,0.45)),
            url('Fabric-4.png');
    font-family: 'Oswald', sans-serif;
    font-size: large;
}

【讨论】：