如何结合背景图像和css渐变？

在发布这篇文章之前，我已经搜索了一个多小时没有找到正确的答案，所以希望有人能帮助我。我的主页上有一个带有大图像的div，其呈现方式如下：

<div id="hero"></div>

我想补充的是：

background: linear-gradient(to right, rgba(38, 35, 31, 0.8) 0%, rgba(65, 60, 53, 0) 50%, rgba(38, 35, 31, 0.8) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
content: "";
left: 0;
opacity: 1;
right: 0;
top: 0;
transition: opacity 0.5s ease 0s;

但是，将其添加到div时，它不起作用。我甚至尝试将背景图像和渐变相结合，如：

background-image: url("hero.jpg"), linear-gradient(to right, rgba(38, 35, 31, 0.8) 0%, rgba(65, 60, 53, 0) 50%, rgba(38, 35, 31, 0.8) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);

但这只是一个空白

知道我做错了什么吗

谢谢您的提示：）

---

编辑：请注意，我在“hero”div中还有一些内容（按钮和文本），因此它不应该覆盖内容，而应该覆盖背景图像。

事实上，我刚刚找到了自己的答案，所以我将它发布在这里，以防其他人需要它

修复它的方法是使用：

#hero:before

---

对于背景渐变。

首先，您以错误的顺序放置背景材质。要使用多背景功能，您应该记住，第一个放置的背景材质（图像或渐变）将覆盖后一个放置的背景。 其次，您的颜色可以区分渐变背景和白色背景，但与图像背景相比，渐变背景相当暗淡。所以我试着把它改成黑色。以下是代码详细信息：

#hero{
  background: linear-gradient(to right, black, rgba(38, 35, 31, .5) 40%, rgba(65, 60, 53, 0) 50%, rgba(38, 35, 31, .5) 60%, black), 
              url("http://placekitten.com/500/200");
  ...
}

---

为什么不修复这个图像呢？它一直在工作

#hero{
  background: linear-gradient(to right, black, rgba(38, 35, 31, .5) 40%, rgba(65, 60, 53, 0) 50%, rgba(38, 35, 31, .5) 60%, black), 
              url("http://placekitten.com/500/200");
  ...
}