CSSで背景画像を色づける方法

Question

私はこれを行う方法がわかりません。私は人々が背景画像のURLの下にCSSの使用linear gradientと言う見ているとrgbaの値を追加するが、私はlinear-gradientを入れて何らかの理由でそれは動作しません。私が自分のCMSにコードを入力すると、それは白であり、他のすべての作業プロパティはグレーになります。 （ちょうどそれが動作しないことを説明する）ここに私のコードです。これが理にかなってほしい。

.topInfo { 
    background-image: url('/CMS_Static/Uploads/313864614C6F6F/miami beach-1.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    height: 684px; 
    linear-gradient: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85)), 
} 

Answer 1

の直線勾配それは

background: linear-gradient(rgba(249, 119, 76,.75), rgba(128, 42, 12,.85)); 

のようなものでなければなりません 背景のプロパティが https://www.w3schools.com/css/css3_gradients.asp

Answer 2

でより多くを参照してください。これはまさに方法であなたは間違いなく可能である、というわけではありませんそれにアプローチしようとしている。要素に複数の背景を適用するには、this answerをチェックしてください。これらの背景が適用される順序は効果があることに注意してください。

色の定義に注意してください。 rgbaは、RGBで定義された色を受け入れます。使用するように16進数ではありません。

#F9774C = rgb(249,119,76) 
#802A0C = rgb(128,42,12) 

があなたの線形勾配があり、これらにご希望のアルファ値を追加し、rgbからrgbaにフォーマットを変更する：私は、RGB値にあなたの色をconverted

linear-gradient(rgba(249,119,76,.75), rgba(128,42,12,.85)) 

はhereを、それをチェックアウト、しかしください。上にリンクされた答えを読んでください。ブラウザの互換性とフォールバックに関する有用な情報があります。

Answer 3

同じ要素に2つの背景を設定するとできます。最初の背景は少し透明である必要があります。そのため、最初の背景は最初の背景の下に表示されます。線状の背景は、通常の画像のように、背景にすることもできます。 ,で複数の背景を設定できます。

例：

body { 
    background-image: 
    linear-gradient(0deg, rgba(0,255,0,0.4), rgba(255,0,0,0.2)), 
    url(https://upload.wikimedia.org/wikipedia/commons/4/41/Sol454_Marte_spirit.jpg); 
} 

あなたが行動hereに完全な例を見ることができます。

あなたは読んし、約background-imagehereを学ぶことができます。

あなたは読んし、約linear-gradienthereを学ぶことができます。