CSS背景画像の色オーバーレイ

は、これは動作します。しかしCSS背景画像の色オーバーレイ

.header { 
    background: linear-gradient(to bottom, rgba(100, 100, 100, 1.0), rgba(0, 0, 0, 0.1)), url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg"); 
    height: 400px; 
    background-position: center center; 
}

が、これは動作しません：

.header { 
    background: rgba(100, 100, 100, 0.5), url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg"); 
    height: 400px; 
    background-position: center center; 
}

誰でも任意の理由を説明がありますか？なぜ私はちょうどRGBA線形勾配を使用せずに色のオーバーレイでイメージを少し傾ける？

私を殺してはいけません。完全な初心者です。

出典

2017-07-30 firestarter88

あなたは、単純なを使用している場合色（e RBGAの値であれば、それは色として読み取られます）。グラデーションを使用する場合、出力はイメージです。シンプルな色を使用する場合は、イメージの 'RGBA'値と' url'の間にカンマは必要ありませんが、オーバーレイの代わりに**代替背景**になります。イメージが読み込まれると、 'background-blend-mode'プロパティに何か他のものを指定しない限りです。グラデーションを使用する場合、出力はイメージなので、カンマが必要です。あなたの問題は構文です。オーバーレイに擬似要素を使用してみませんか？ –

旗を掲げた欺瞞はこの質問とは関係ありません。 –

なぜこの投稿は関係のない質問リンクと重複しているとフラグされていますか？とにかく、ここにあなたのための答えの一種です。 https://css-tricks.com/tinted-images-multiple-backgrounds/ –

あなたは、このコードのように使用します。ここでは

ID作業のデモ：https://output.jsbin.com/voyotep

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<div class="layer"></div> 
</body> 
</html>

CSS：

html { 
    background:url('https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg'); 
    min-height:100%; 
    background-size:cover; 
    position: relative; 
} 

.layer { 
    background-color: rgba(100, 100, 100, 0.5); 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

出典

2017-07-30 19:44:19

これは問題を解決しますが、実際には質問に答えません。 –

デモをありがとう、この問題を回避するもう一つの方法は、画像上にオーバーレイを追加することです。私はあなたのソリューションが好きです。線形グラデーションを使用し、同じ色を2回ペーストするのはゲットーのようです。しかし実際には問題ではありませんでした。 – firestarter88

このように 'background：rgba（100,100,100,0.5）'の後のスペースで '、'を削除するだけです。 '.header { 背景：rgba（100,100,100,0.5） 100、0.5）url（ "https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg"）; 身長：400px; バックグラウンドポジション：center center; } ' –

CSS背景画像の色オーバーレイ

答えて

関連する問題