質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • HTML5

    4982questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2563questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 862

tidavest

score -119

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のカラーの指定があります。見た目上、反映している用の思えないのですが、どの点が変わっているのでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/01/21 21:48

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

    キャンセル

回答 1

+1

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

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

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

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

少し解説致します。

 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

以上がざっくりとした説明になります。
不明な点があれば、返信などでご指摘ください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • HTML5

    4982questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2563questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。