ページ全体にマスクをかける方法

既存のページ全体に薄い黒のマスクをかけその上に文章を載せたいのですが、
どのように実装するのがよいでしょうか？

そのマスクはクリックで消えたりなどはせず、
もともとのページのリンクなどはクリックなどはできないようにしたいです。

ご教示のほどよろしくお願い致します。

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

回答2件

ベストアンサー

大雑把にかくとこんな感じ

HTML
1<style>
2#mask{
3position:absolute;
4width:100%;
5height:100%;
6background-Color:black;
7padding:0px;
8top:0px;
9left:0px;
10opacity:0.2;
11}
12</style>
13<div id="mask"></div>
14<a href="#test">test</a>
15<textarea>test</textarea>
16<input type="button" value="test">

投稿2017/12/15 01:30

yambejp

総合スコア114839

MeB

2017/12/15 05:19

回答ありがとうございます！！ https://www.pqnavi.com/special/thanksmillion2 このような感じにしたいのですがテキストはどう載せたらいいのでしょうか… position:absoluteではうまく行かなかったためfixedにしました。

MeB

2017/12/15 05:28

すみません。できました…

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

HTML
1<div class="backgrop"><p class="dialog">message</p></div>

CSS
1.backgrop {
2  display: flex;
3  justify-content: space-around;
4  align-items: center;
5  position: fixed;
6  top: 0;
7  right: 0;
8  bottom: 0;
9  left: 0;
10  overflow: auto;
11  z-index: 999;
12  opacity: 0.5;
13  background: #000;
14  color: #fff;
15}
16
17.dialog {
18  width: 70%;
19  margin: auto;
20  z-index: 9999;
21  background: #fff;
22  color: #000;
23}