読者です 読者をやめる 読者になる 読者になる

日々精進

新しく学んだことを書き留めていきます

半透明のマスクをかける

web

ポップアップウィンドウの外側の領域のように半透明のマスクをかけたい場合は マスクをかけたい要素の子どものdivを以下のように設定すればいい。 mask用divはposition: absoluteにして親要素全体を覆うようにする。 親はposition: relativeにしないといけない。

<div style="position: relative">
    ...
    <div class="mask" />
</div>
mask {
  content: '\A';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: black;
  opacity: 0.5;
}

参考: