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

既存のサイト全体に、上から「終了」という画像をかぶせたいのですが、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枚物の画像をかぶせたいです。

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

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

回答3件

HTML
1<html>
2  <head>
3  </head>
4  <body>
5    <div id="wrapper">
6      <div id="sections">
7        <div class="section" id="section01"></div>
8        <div class="section" id="section02"></div>
9        <div class="section" id="section03"></div>
10        <div class="section" id="section04"></div>
11        <div class="section" id="section05"></div>
12      </div>
13      <div id="fotter"></div>
14    </div>
15  </body>
16</html>

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

投稿2017/04/21 03:57

Zuishin

総合スコア28660

avantgarden

2017/04/21 04:34

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

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

ベストアンサー

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 03:51

lyrica0503

総合スコア96

avantgarden

2017/04/21 04:18

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

lyrica0503

2017/04/21 04:27

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

avantgarden

2017/04/21 04:34

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

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