Question

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

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

它现在可以很好地工作，但是我想在图像的左侧和右侧添加渐变以将其淡化为几乎黑色，但是我似乎无法使其正常工作。

英雄div的CSS是：

#hero{
background-image: url("hero.jpg");
background-position: center center;
background-repeat: repeat-x;
background-color:#FFFFFF;
width:100%;
height:200px;
position:relative;
}

我想补充的是：

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);

但那只是显示一个空格。

任何想法我做错了什么？

感谢您提供任何提示：）

编辑：请注意，我还有一些内容（按钮和文字）在＆＃34;英雄＆＃34; div，所以它不应该覆盖内容，只覆盖背景图像。

Answer 1

实际上，我刚刚找到了自己的答案，所以我在这里发帖，万一其他人需要它！

修复它的方法是使用：

#hero:before

表示背景渐变。

Answer 2

首先，您将背景材质放置在错误的顺序中，要使用多个背景特征，您应该记住第一个放置的背景材质（图像或渐变）将覆盖后置背景。其次，您的颜色可以区分渐变背景与白色背景但它对图像背景相当暗淡。所以我尝试将其更改为black。以下是代码详细信息：

#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");
  ...
}

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

2 个答案:

Demo.