イメージオーバーレイを使用したCSSバックグラウンドグラデーション

Question

ちょうど非常に速いものです。私はちょっとした問題を抱えています。つまり、バックグラウンドCSS要素の順序です。

は、私は次があります：PNG

background-color: #3C3E89; /* For browsers that do not support gradients */ 
background: -webkit-linear-gradient(#3C3E89, #6265E4); /* For Safari 5.1 to 6.0 */ 
background: -o-linear-gradient(#3C3E89, #6265E4); /* For Opera 11.1 to 12.0 */ 
background: -moz-linear-gradient(#3C3E89, #6265E4); /* For Firefox 3.6 to 15 */ 
background: linear-gradient(#3C3E89, #6265E4); /* Standard syntax */ 
background-image: url('../images/logo.png'); 
background-size: cover; 

そして、いくつかの理由 - それは透明層を有しているが - 私はそれが上に座るしたいどの線形グラデーションを上書きします。

これは正しい方法が何であるかを知るために私は少し根を張りました。私は誰もが勾配の背景の上にpngをオーバーレイするための試行錯誤の方法があったのだろうかと疑問に思っていた...

私は誰もがこれは重複した質問だと叫ぶだろう - 何か私は彼らの提案をうまく実装できませんでした。

更新：

background-image: 
    -webkit-linear-gradient(#3C3E89, #6265E4), /* For Safari 5.1 to 6.0 */ 
    -o-linear-gradient(#3C3E89, #6265E4), /* For Opera 11.1 to 12.0 */ 
    -moz-linear-gradient(#3C3E89, #6265E4), /* For Firefox 3.6 to 15 */ 
    linear-gradient(#3C3E89, #6265E4), /* Standard HTML Syntax */ 
    url('../images/logo.png'); 

そして...あなたはbackground-imageを設定することで、背景をオーバーライドしている

background: 
    -webkit-linear-gradient(#3C3E89, #6265E4), /* For Safari 5.1 to 6.0 */ 
    -o-linear-gradient(#3C3E89, #6265E4), /* For Opera 11.1 to 12.0 */ 
    -moz-linear-gradient(#3C3E89, #6265E4), /* For Firefox 3.6 to 15 */ 
    linear-gradient(#3C3E89, #6265E4), /* Standard HTML Syntax */ 
    url('../images/logo.png'); 

Answer 1

：

は、私はまた、次のことを試してみました。代わりに、複数の背景を使用する必要があります。documentation背景によると

background-image: url('../images/logo.png'), linear-gradient(#3C3E89, #6265E4); 

を最も遠くに最も近いから描かれています。したがって、あなたの場合、画像は最初にグラデーション上に描画されるべきです。あなたもこの構文を使用することができるようグラジエント型がbackground-imageのように動作している

Answer 2

リニア：

.content { 
 
    background-image: linear-gradient(#3C3E89, #6265E4); 
 
    height:200px; 
 
}

<div class="content"> 
 
</div>

背景画像のあなたのCSSルールがそれをオーバーライドしている理由です。代わりに、あなたは、このように複数の背景を指定する必要があります。

.content { 
 
    height: 200px; 
 
    background: linear-gradient(#3C3E89, rgba(98, 101, 228, 0.21)), url(https://lorempixel.com/200/100/); 
 
}

<div class="content"> 
 
</div>

あなたはために注意を払う必要があります。私の例では、グラデーションは画像の上にあります。が最初にになり、画像を見るために不透明度が追加されました。透明性のないソリッドカラーまたはイメージを使用する場合は、の最初のの背景のみが表示されます。