html cssを使用して、2つの画像を重ね合わせる

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
上記URLで、画像の重ね方を参照し、

.head { float:left;
border-bottom:10px solid lightgray;
background-image:url("cola.jpg")linear-gradient( to middle,rgba(),),
url("");
width:980px;height:340px;
}

上記のコードを書きました。

上に重ねる画像をミドルのトップに持ってきたいのですが、
指定をどのように修正すればよろしいでしょうか。
あと、URLのカラーの指定があります。見た目上、反映している用の思えないのですが、どの点が変わっているのでしょうか。

kei344

2017/01/21 12:48

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

「見た目上、反映している用の思えない」というのは、2つの理由があります。

書き方にミスがある
最前面に cola.jpg が敷き詰められるので、奥のグラデーションが隠れてしまう。

これらの修正と、「上に重ねる画像をミドルのトップ」の加筆をしたコードが下になります。

css
1.head {
2	float: left;
3	border-bottom: 10px solid lightgray; 
4	background: url("cola.jpg") center top no-repeat
5		, linear-gradient(to bottom, rgba(255, 0, 0, 0), #f00);
6	width: 980px; height: 340px; 
7}

少し解説致します。

background-image を background に修正

background-image は文字通り、背景の画像のみを指定するプロパティです。
そのため、「ミドルのトップ」などという指定はできません。
background を使えば背景の指定を全般的にできますので、こちらに修正しました。
参考：MDN background

center top を追加

center top は文字通り、画像を真ん中の上端に持って行きます。

no-repeat

no-repeat とは、背景画像を敷き詰めず、1つだけ表示する指定です。
この指定がないと初期値の repeat が指定してあるものと見なされ、上下左右まんべんなく画像が敷き詰められてしまい、後面にあるグラデーションが見えなくなってしまいます。

to middle を to bottom に修正

linear-gradient の方向に to middle という指定は存在しません。
線状のグラデーションの方向ですので、to bottom（下に）や to left top（左上に）や45deg（45°）などと指定します。
参考：MDN linear-gradient
もし、本当に「真ん中に向かう」指定をしたいのであれば、linear-gradient ではなく radial-gradient を使ってください。
参考：MDN radial-gradient