Question

如何在Bootstrap中的背景图像上方设置线性渐变？我尝试了很多方法，但我无法弄清楚发生了什么，我看不到渐变。假设gredient出现在图像之后，但是没有任何事情发生，我唯一看到的就是图像本身。

#promo {
margin: 50px auto 50px;
background-image: url(images/promo.jpg), linear-gradient(to bottom, rgba(0,0,0,1) 20%, rgba(100,51,51,0.6) 86%, rgba(51,51,51,0.8) 100%);
opacity: 0.5;
height: 500px;

}

<section id="promo">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h1>Hello World</h1>
            </div>
        </div>
    </div>
</section>

Answer 1

您的图像输入顺序错误：

每MDN

使用CSS3，您可以将多个背景应用于元素。这些是在顶部提供的第一个背景和背面列出的最后一个背景之上。只有最后一个背景可以包含背景颜色。

#promo {
  background-image: 
    /* top image*/
    linear-gradient(to bottom, rgba(0, 0, 0, 1) 20%, rgba(100, 51, 51, 0.6) 86%, rgba(51, 51, 51, 0.8) 100%),
    /*bottom image*/
    url(http://lorempixel.com/image_output/abstract-q-c-500-500-3.jpg);
  height: 500px;
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section id="promo">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1>Hello World</h1>
      </div>
    </div>
  </div>
</section>

在Bootstrap中在背景图像上方设置线性渐变

1 个答案: