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

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

ただいまの
回答率

88.91%

htmlで上から画像をかぶせる方法

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 2,014

KCBR6502

score 75

既存のサイト全体に、上から「終了」という画像をかぶせたいのですが、html状どのように書けばいいでしょうか。

現状は、

<html>
  <head>
  </head>
  <body>
    <div id="wrapper">
      <div id="section01"></div>
      <div id="section02"></div>
      <div id="section03"></div>
      <div id="section04"></div>
      <div id="section05"></div>
      <div id="fotter"></div>
    </div>
  </body>
</html>

という構造になっています。(divの中身は省略)

具体的にはsection02からsection05の範囲で、上から1枚物の画像をかぶせたいです。

よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

0

KCBR6502さん、こんにちは。

このようなコードではいかがでしょうか。

html

<html>
  <head>
  </head>
  <body>

    <div class="endAnn">
      <div class="endAnnBox">

        <!--#この部分は文字にしてありますが、画像の場合は画像を -->
        <p>終了</p>

        <!--#
        <img src="#" alt="#" />
        -->
      </div>
    </div>

    <div id="wrapper">
      <div id="section01"></div>
      <div id="section02"></div>
      <div id="section03"></div>
      <div id="section04"></div>
      <div id="section05"></div>
      <div id="fotter"></div>
    </div>
  </body>
</html>

CSS

.endAnn{
   position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:99;
}

.endAnnBox{
  width:100%;
  height:100%;

   position:relative;
   z-index:1;
}

.endAnnBox p{
  color:#fff;

  position:absolute;
  z-index:2;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  width:100%;
  height:20%;
  text-align:center;
}

何かしらの告知+告知の下の層は触らせたくないという想定で
告知をfixedにし追尾する形にしてあります。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/21 13:18

    ありがとうございます。
    他のブロックのスタイルとの兼ね合いで、.endAnnのz-indexを9999にするといけました。
    あと、細かいとのことなのですが、endAnnBoxのpタグの文言を2行にしたいです。pタグを2つにしたり改行タグをいれても、2行の文字が重なってしまいます。
    時間をかけると解決できそうなのですが、状況的に急いでおりまして、追加で教えていただけると有難いです…!

    キャンセル

  • 2017/04/21 13:27

    <p>終了</p>の部分を

    <span>
     <p>あああああ</p>
     <p>いいいいい</p>
    </span>

    に変更していただき、

    CSSの
    .endAnnBox pを.endAnnBox spanに
    プロパティにdisplay:block;を追加してみてください。
    まだ文字が重なるようであれば、line-heightなどのCSSなのかなと
    思うので、line-height:normal;などを加えてあげると治るかも?

    キャンセル

  • 2017/04/21 13:34

    ありがとうございます。いけました。
    あとは良いようにカスタムさせていただきます。
    また、時間のあるときに書いていただいたコードをよく理解しておきます。

    キャンセル

0

section02からsection05の範囲

というのが確定できないので困難だと思いますし
可変サイズの領域に画像をかぶせるとデザイン的によくないと思います

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/21 13:35

    ご回答、ありがとうございます。
    参考にさせていだきます。

    キャンセル

0

<html>
  <head>
  </head>
  <body>
    <div id="wrapper">
      <div id="sections">
        <div class="section" id="section01"></div>
        <div class="section" id="section02"></div>
        <div class="section" id="section03"></div>
        <div class="section" id="section04"></div>
        <div class="section" id="section05"></div>
      </div>
      <div id="fotter"></div>
    </div>
  </body>
</html>

このようにして、sections の背景画像を指定し、section の文字色を transparent にするというのはどうでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/21 13:34

    ご回答、ありがとうございます。
    参考にさせていだきます。

    キャンセル

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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