HTMLで画面全体を暗くする方法

body {
  overflow: hidden;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

上記のコードでは、body要素のoverflowプロパティをhiddenに設定し、ページのスクロールを無効化しています。また、overlayクラスを持つ要素を追加し、positionプロパティをfixedに設定して画面全体にオーバーレイを表示しています。背景色はrgba(0, 0, 0, 0.5)で指定されており、0.5の透明度を持つ黒色のオーバーレイが表示されます。

function showOverlay() {
  var overlay = document.createElement('div');
  overlay.className = 'overlay';
  document.body.appendChild(overlay);
}
function hideOverlay() {
  var overlay = document.querySelector('.overlay');
  overlay.parentNode.removeChild(overlay);
}

上記のコードでは、showOverlay関数を呼び出すとoverlayクラスを持つ要素が生成され、body要素に追加されます。hideOverlay関数を呼び出すと、生成されたオーバーレイが削除されます。

使用例:

<button onclick="showOverlay()">画面を暗くする</button>
<button onclick="hideOverlay()">暗転を解除する</button>

上記のコードでは、ボタンをクリックするとshowOverlay関数またはhideOverlay関数が呼び出され、画面全体が暗くなったり解除されたりします。

これらの方法を使用すると、HTMLで画面全体を暗くすることができます。必要に応じて、スタイルやアニメーションをカスタマイズすることも可能です。