BinaryDevelop
  1. ホーム
  2. html

[解決済み] Divをviewportだけでなく、全ページにオーバーレイさせるには？

2022-11-30 14:08:31

質問

よくあることだと思うのですが、まだ良い解決策が見つかっていない問題があります。 私はオーバーレイ div がページ全体を覆うようにしたいのですが...。ビューポートだけでなく。 なぜこれがそんなに難しいのか理解できません...。 私は、ボディ、htmlの高さを100％に設定しようとしましたが、それは動作していません。 以下は、私が今までに作成したものです。 

<html>
<head>
    <style type="text/css">
    .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
    body { height: 100%; }
    html { height: 100%; }
    </style>
</head>

<body>
    <div style="height: 100%; width: 100%; position: relative;">
        <div style="height: 100px; width: 300px; background-color: Red;">
        </div>
        <div style="height: 230px; width: 9000px; background-color: Green;">
        </div>
        <div style="height: 900px; width: 200px; background-color: Blue;"></div>
        <div class="OverLay">TestTest!</div>
    </div>


    </body>
</html>

JavaScriptで解決する方法もあれば教えてほしいのですが、それよりも簡単なCSSで解決したいです。

どのように解決するのですか？

ビューポートが重要なのですが、スクロール中でもウェブサイト全体を暗くしたままにしたい場合があります。そのためには position:fixed の代わりに position:absolute . 固定にすることで、スクロールしても画面上で要素が静止し、ボディ全体が暗くなったような印象を与えます。

例 http://jsbin.com/okabo3/edit 

div.fadeMe {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}


<body>
  <div class="fadeMe"></div>
  <p>A bunch of content here...</p>
</body>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します