在Bootstrap中的背景圖像上方設置線性漸變

Question

如何在Bootstrap中的背景圖像上方設置線性漸變？ 我已經嘗試了很多方法，但是我不知道發生了什么，也看不到漸變。 可以認為圖像是緊隨其后的，但同樣沒有任何反應，我唯一看到的就是圖像本身。

#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-qc-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>